1、prop是一个对象而不是字符串数组时，它包含验证要求。
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}

2、父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
$on(eventName) 监听事件
$emit(eventName) 触发事件

3、使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名（如myLogin），则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时在两个单词之前，使用 - 链接（<my-login></my-login>）；如果不使用驼峰,则直接拿名称来使用即可；

注意：不论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个根元素，否则会报错。

4、用于登陆和注册两个组件之间的切换问题：使用flag即可。
注：由于flag的值只有true和false，所以只能用于两个组件间 的切换，当大于两个组件的切换就不行了。具体操作如下：
<div id="box">
<!-- 给a注册点击事件，切换flag状态 -->
<a href="javascript:;" @click.prevent="flag=true">登录</a>
<a href="javascript:;" @click.prevent="flag=false">注册</a>
<!-- 使用v-if v-else切换组件 -->
<login v-if="flag">
</login>
<register v-else="flag">
</register>
</div>

<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
});
Vue.component('register', {
template: '<h3>注册组件</h3>'
});

var vm = new Vue({
el: "#box",
data: {
flag: true
},
methods: {}
});
</script>

如要切换3个及以上的组件则需要使用 :is 属性来执行。
如：<component :is="componentId"></component>

具体实施：
<div id="box">
<!-- 给a注册点击事件，切换flag状态 -->
<a href="javascript:;" @click.prevent="componentId='login'">登录</a>
<a href="javascript:;" @click.prevent="componentId='register'">注册</a>
<component :is="componentId"></component>
</div>

<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
});
Vue.component('register', {
template: '<h3>注册组件</h3>'
});

var vm = new Vue({
el: "#box",
data: {
componentId: 'login' // 默认显示登录
},
methods: {}
});
</script>

5、父组件引用子组件，通过绑定属性（v-bind:）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。

<div id="box">
<mycom v-bind:parentmsg="msg"></mycom>
</div>

<template id="temp">
<h3>子组件 --- 父组件：{{parentmsg}}</h3>
</template>

<script>
var vm = new Vue({
el: "#box",
data: {
msg: '父组件的msg'
},
methods: {},
components: {
mycom: {
template: "#temp",
// 对传递给子组件的数据进行声明，子组件才能使用
props: ['parentmsg']
}
}
});
</script>

注意：父组件绑定的属性名称不能有大写字母，否则不会显示，并且在命令行会有提示：

6、组件data数据和props数据的区别：
data数据是子组件私有的，可读可写；
props数据是父组件传递给子组件的，只能读，不能写。

案例：发表评论功能
父组件为评论列表，子组件为ID，评论者，内容和按钮的集合，在输入ID，评论者等内容，然后点击添加的时候，需要首先获取子组件的list列表，然后再添加新的列表项到列表中。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/jquery.min.js"></script>
<script rel="script" src="js/vue.min.js"></script>
</head>
<body>
<div id="box">
<mycom :plist="list"></mycom>
<!--父组件列表-->
<ul>
<li v-for="item in list" :key="item.id">
ID:{{item.id}} --- 内容：{{item.content}} --- 评论人：{{item.user}}
</li>
</ul>
</div>

<!--子组件：内容需要添加到父组件的列表中-->
<template id="tmp1">
<div>
<label>
ID:
<input type="text" v-model="id">
</label>
<br>
<label>
评论者:
<input type="text" v-model="user">
</label>
<br>
<label>
内容:
<textarea v-model="content"></textarea>
</label>
<br>
<!-- 把父组件的数据作为子组件的函数参数传入 -->
<input type="button" value="添加评论" @click="addContent(plist)">
</div>
</template>
<script>
var vm = new Vue({
el: "#box",
data: {
list: [{
id: Date.now(),
user: 'user1',
content: 'what'
}, {
id: Date.now(),
user: 'user2',
content: 'are'
}]
},
methods: {},
components: {
mycom: {
template: '#tmp1',
data: function () {
return {
id: '',
user: '',
content: '',
}
},
methods: {
addContent(plist) {

//plist.unshift({ //可向数组的开头添加一个或更多元素,并返回新的长度。

plist.push({ //将新项添加到数组末尾，请使用 push() 方法。

id: this.id,
user: this.user,
content: this.content
});
}
},
props: ['plist']
}
}
});
</script>
</body>
</html>
把添加ID，评论人，内容作为子组件，把列表作为父组件，然后把添加的数据放到父组件列表上，由于要获取到父组件列表的数据，所以必然涉及到父组件向子组件传值的过程。这里还通过子组件方法参数来保存父组件的数据到子组件的数据中。

Vue注意事项及用得较多的属性归纳的更多相关文章

  1. params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render

    params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render

  2. Vue.js学习笔记--1.基础HTML和JS属性的使用

    整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...

  3. Vue.js 源码分析(十) 基础篇 ref属性详解

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...

  4. vue 打包上线后 所使用的css3渐变属性丢失的问题解决方案

    最近在做vue项目的时候用到了css3渐变属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: .join{ position:absolute; left:1rem; botto ...

  5. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  6. Blazor和Vue对比学习（基础1.3）：属性和父子传值

    组件除了要解决视图层展示.视图层与逻辑层的数据绑定,还需要解决一个重大问题,就是在组件树中实现数据传递,包括了父到子.子到父.祖到孙,以及任意组织之间.而我们上一章讲到的实现双向绑定的两个指令,Vue ...

  7. VUE注意事项（建项目）

    1>删除空格影响的:删除掉框中的代码 2>不需要新建,直接打开APP.vue,在此文件上进行修改,(注意:index.html最好不要进行修改) 3>修改APP.vue为自己需要的页 ...

  8. Vue注意事项

    在使用Vue中的函数或自己定义的函数或指令的时候,Vue说明如下 在一些自己定义或系统定义的驼峰命名规则的时候,你需要到元素区域引用的使用中间的大写要改成小写在谭家 一条横杠如: 你在var=new ...

  9. vue中给请求到的数据对象加属性问题

    今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...

随机推荐

  1. typecho只能打开主页,文章详细内容打不开

    安装环境: nginx+linux 问题描述: 安装了typecho显示成功安装,但是前端只显示标题和摘要,点击查看不了详细内容. 问题原因: PHP这块不支持pathinfo, 官网提供的解决方案有 ...

  2. Javascript - ExtJs - 其它

    组件通用配置 width:number | "%" //宽   height:number | "%" //高   autoEl:string | Json / ...

  3. Gulp简明使用教程

    Glup用自动化构建工具增强你的工作流程! 同类型的软件还有Grunt.关于两者的区别可以参考这篇文章Grunt VS Gulp 安装: $ npm install gulp -g $ npm ins ...

  4. Nginx系列3：用Nginx搭建一个具备缓存功能的反向代理服务

    反向代理的理解:https://www.cnblogs.com/zkfopen/p/10126105.html 我是在一台linux服务器上搭建了两个nginx服务器A和B,把静态资源文件甲放在A服务 ...

  5. 【运维】Dell R710如何开启VT服务

    [前言]:           英特尔的硬件辅助虚拟化技术(Virtualization Technology,简称VT技术)是一种设计更简单.实施更高效和可靠的方法.           如果想要在 ...

  6. SharePoint 2016 vs部署报错：无法加载功能xxx未能加载文件或程序集xxx或它的某一个依赖项。系统找不到指定的文件

    环境描述: SharePoint 2016 单服务器场模式 开发工具:VS2017,项目类型(功能):计时器. 问题描述: 在用vs直接部署时,报错如下: 部署步骤"激活功能"中出 ...

  7. <TCP/IP>DHCP动态主机配置协议

    坚持是一种好习惯 大家都知道,为了上网我们是需要提交一些配置信息的,如IP地址,子网掩码,DNS服务器等,这些是一个主机能够在Internet上运行并给用户提供常用服务(比如web和Email)的基本 ...

  8. vue2.x + vux采坑总结（一）

    1.<tab-bar> 切换时,iocn高亮跟着切换问题 vux的Tabbar组件是用来实现底部tab栏,详情见官网文档 , 实现实例截图: 代码如下,控制高亮的是代码凸显部分:selec ...

  9. linux下.bashrc文件 /PATH环境变量修改 /提示符修改

    1) .bashrc文件 在linux系统普通用户目录(cd /home/xxx)或root用户目录(cd /root)下,用指令ls -al可以看到4个隐藏文件, .bash_history   记 ...

  10. 计算机基础+python安装注意问题+python变量介绍

    1.什么是编程语言语言是一个事物与另外一个事物沟通的介质编程语言是程序员与计算机沟通的介质 2.什么是编程编程就是程序按照某种编程语言的语法规范将自己想要让计算机做的事情表达出来表达的结果就是程序,程 ...