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. okhttp3与旧版本okhttp的区别分析

    https://www.jianshu.com/p/4a8c94b239b4  待总结学习

  2. Fragment回退栈&commit()和commitAllowingStateLoss()

    Activity切换时是通过栈的形式,不断压栈出栈,在Fragment的时候,如果你不是手动开启回退栈,它是直接销毁再重建,但如果将Fragment任务添加到回退栈,情况就会不一样了,它就有了类似Ac ...

  3. launch 文件的写法

    1. launch文件的写法 ❀标签          ☺<node> 启动一个节点          ☺ <param> 设置参数服务器的参数          ☺ < ...

  4. 数字图像处理的Matlab实现（2）—MATLAB基础

    第2章 MATLAB编程基础 2.1 M-文件 MATLAB中的M-文件可以是简单执行一系列MATLAB语句的源文件,也可以是接收自变量并产生一个或多个输出的函数. M-文件由文本编辑器创建,并以fi ...

  5. Shell-find . -type f -name "*.log" -print0 | xargs -0 rm -f

    用 rm 删除太多的文件时候,可能得到一个错误信息:/bin/rm Argument list too long.

  6. Nginx 测试环境配置，留作笔记使用

    Nginx 测试环境配置,留做笔记 以下全是配置文件的配置,如果有疑问还请移步Nginx官网参考官方文档. 环境: [root@CentOS6-M01 conf]# cat /etc/redhat-r ...

  7. HTML5实现全屏

    现在主流的浏览器都支持全屏,但是各家实现不一.下面是主流浏览器实现方法: // W3C 提议 element.requestFullscreen(); element.exitFullscreen() ...

  8. C#实现邮件发送的功能

    Ø  发送邮件所用的核心知识点 微软封装好的MailMessage类:主要处理发送邮件的内容(如:收发人地址.标题.主体.图片等等) 微软封装好的SmtpClient类:主要处理用smtp方式发送此邮 ...

  9. 题解-bzoj4061 CERC-2012Farm and Factory

    Problem Please contact lydsy2012@163.com! 题意概要:给定\(n\)点\(m\)边无向图,设定两个起点为\(1,2\),现要求在图中增加一个点,并将这个点与其他 ...

  10. IEnumerable和IEnumerator使用

    IEnumerable接口是非常的简单,只包含一个抽象的方法GetEnumerator(),它返回一个可用于循环访问集合的IEnumerator对象. IEnumerator是一个真正的集合访问器,没 ...