简介：
1.父组件可以使用 props 把数据传给子组件。
2.子组件可以使用 $emit() 触发父组件的自定义事件。
开始学习
文件说明：
html文件名字 vue2.html
js文件名字 vue2.js
css文件名字 vue2.css
- 先定义父子两个组件和一个 Vue 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="vue2.css" />
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
<parent></parent>
</div>
<script src="vue2.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
var childNode = {
template: `<div>我是子组件</div>`
};
var parentNode = {
template: `<div><child></child><child></child></div>`,
components: {
child: childNode
}
};
new Vue({
el: '#example',
components: {
parent: parentNode
}
});
效果1
静态 props 传递
- 要让子组件使用父组件的数据，需要通过子组件的 props 选项。
父组件向子组件传递数据分为两种方式：动态和静态，这里先学习静态方式。
例子：子组件显示用 props 获得的数据
说明 （命名规范）：
- 对于 props 声明的属性，在父组件的 template 模板中，属性名需要使用中划线写法；
- 子组件 props 属性声明时，使用小驼峰{{}}或者中划线写法都可以；
- 而子组件的模板使用从父组件传来的变量时，需要使用对应的小驼峰{{}}写法。
- Vue 能够正确识别出小驼峰和下划线命名法混用的变量且不分大小写，如这里的post-msg和postMsg是同一值
小驼峰写法是需要把中横线后面的第一个字母大写 切记： 如 post-msg => postMsg
var childNode = {
template: `
<div>
{{postMsg}}
</div>
`,
props: ["post-msg"]
};
var parentNode = {
template: `
<div>
<child post-msg="aaa"></child>
<child post-msg="bbb"></child>
</div>
`,
components: {
child: childNode
}
};
给 childNode 添加一个 props 选项和需要的post-msg数据
效果2
动态 props 传递
动态地绑定父组件的数据到子组件模板的 props,使用v-bind绑定
var parentNode = {
template: `
<div>
<child v-bind:post-msg="msg1"></child>
<child v-bind:post-msg="msg2"></child>
</div>
`,
components: {
child: childNode
},
data: function(){
return {
msg1:"消息1",
msg2:"消息2"
};
}
// data: {
// msg1:"消息1",
// msg2:"消息2"
// }
//这种写法不行。这里设计data的三种写法了
};
data的三种写法与区别
//第一种
data: {
msg1:"消息1",
msg2:"消息2"
}
//第二种
data: function(){
return {
msg1:"消息1",
msg2:"消息2"
}
}
//第三种
data() {
return {
isLogin: false
}
}
第3种是第2种的ES6写法 其实是一样的。没区别
区别：
1）在简单的Vue实例中，没什么区别，因为你app对象不会被复用。
2）但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。（即第二三种）
props 验证
我们看到很多这种：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
其实这是Vue指定的类型。其中详情：
props: {
title: String, //表示是一个字符串
likes: Number,//表示是一个数字
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
举例：
var childNode = {
props:{
likes:Number
},
template: `
<div>
{{likes}}
</div>
`,
};
var parentNode = {
template: `
<div>
<child v-bind:likes="msg1"></child>
<child v-bind:likes="msg2"></child>
</div>
`,
components: {
child: childNode
},
data: function(){
return {
msg1: "123",
msg2: "123"
}
}
};
给定是Number 传字符串就会报错。
注意：自定义的名称这里需要引号
我被坑的：template最后忘了逗号
var childNode = {
props: {
"post-msg": Number //自定义的名称这里需要引号
},
template: `<div>{{postMsg}}</div>`,
};
var parentNode = {
template: `
<div>
<child v-bind:post-msg="msg1"></child>
</div>
`,
components: {
child: childNode
},
data: function() {
return {
msg1: 123456
};
}
};
下面是一个验证传入的 props 参数的数据的综合：
首先了解几个关键字
- type：接受的类型，可多个类型
- required：声明这个参数是否必须传入。required: true | false
- default: 指定当父组件未传入参数时props变量的默认值
- validator: 当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验
props: {
// propA只接受数值类型的参数
propA: Number,
// propB可以接受字符串和数值类型的参数
propB: [String, Number],
// propC可以接受字符串类型的参数，并且这个参数必须传入
propC: {
type: String,
required: true
},
// propD接受数值类型的参数，如果不传入的话默认就是100
propD: {
type: Number,
default: 100
},
// propE接受对象类型的参数
propE: {
type: Object,
// 当为对象类型设置默认值时必须使用函数返回
default: function(){
return { message: 'Hello, world' }
}
},
// propF使用一个自定义的验证器
propF: {
validator: function(value){
return value>=0 && value<=100;
}
}
}
显然：props是单向数据流： 当父组件的属性变化时，将传导给子组件，但是不会反过来 例子如下：
let childNode = {
template: `
<div class="child">
<div>
<span>子组件数据</span>
<input v-model="postMsg"/>
</div>
<p>{{postMsg}}</p>
</div>`,
props: {
"post-msg": String
}
};
let parentNode = {
template: `
<div class="parent">
<div>
<span>父组件数据</span>
<input v-model="msg"/>
</div>
<p>{{msg}}</p>
<child :post-msg="msg"></child>
</div>
`,
components: {
child: childNode
},
data() {
return {
msg: "default string."
};
}
};
这里我们给父组件和子组件都有一个输入框，并且显示出父组件数据和子组件的数据。当我们在父组件的输入框输入新数据时，同步的子组件数据也被修改了；这就是 props 的向子组件传递数据。而当我们修改子组件的输入框时，浏览器的控制台则报出错误警告
那现在我想只改变父组件的数据，但是不影响到子组件的数据。怎么做呢？
- 定义一个局部变量，并用 props 的值初始化它:
let childNode = {
template: `
<div class="child">
<div>
<span>子组件数据</span>
<input v-model="postMsg"/>
</div>
<p>{{postMsg}}</p>
<p>oldMsg(这个不会改变) : {{oldMsg}}</p>
</div>`,
props: {
"post-msg": String
},
data() {
return {
oldMsg: this.postMsg
}
}
};
实际中子组件想要把props拿到的数据当作自己的数据输出给其他人的方式：
let childNode = {
template: `
<div class="child">
<div>
<span>子组件数据</span>
<input v-model="postMsg"/>
</div>
<p>{{postMsg}}</p>
<p>ownChild给其他人的信息: {{ownChildMsg}}</p>
</div>`,
props: {
"post-msg": String
},
data() {
return {
ownChildMsg: this.postMsg
};
},
watch: {
postMsg() {
this.ownChildMsg = this.postMsg;
}
}
};
let parentNode = {
template: `
<div class="parent">
<div>
<span>父组件数据</span>
<input v-model="msg"/>
</div>
<p>{{msg}}</p>
<child :post-msg="msg"></child>
</div>
`,
components: {
child: childNode
},
data() {
return {
msg: "default string."
};
}
};
props 学习后下面是$emit()
参数：
第一个表示触发事件的名称（父组件在监听的事件名称)
{string} eventName
附加参数都会传给监听器回调（就是这个参数会传给父组件运行的那个事件作为参数）
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。
- 只配合一个事件名使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="vue2.css" />
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
<parent-button v-on:welcome="sayHi"></parent-button>
</div>
<script src="vue2.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Vue.component('parent-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me
</button>
`,
});
new Vue({
el: '#example',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})
- 配合额外的参数使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="vue2.css" />
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
<parent-button v-on:welcome="sayHi"></parent-button>
</div>
<script src="vue2.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Vue.component('parent-button', {
data: function () {
return {
items: ['1', '2', '3']
}
},
methods: {
eventclick: function () {
var index = Math.floor(Math.random() * this.items.length)
//Math.random():获取0~1随机数（包含0 不包含1）
//Math.random()*52 这样我们就能得到一个 >=0 且 <52的数
//Math.floor() :获取这个数在数轴上左边的那个整数
this.$emit('welcome', this.items[index])//携带一个参数是数组里面的随机数
}
},
template: `
<button v-on:click="eventclick">
Click me
</button>
`
});
new Vue({
el: '#example',
methods: {
sayHi: function (callbacknum) {
alert(callbacknum)//回调的数在这
}
}
})
子组件点击按钮button,触发事件welcome,父组件一直在监听welcome收到触发信息，就运行sayHi 方法。
