目录
父组件向子组件通信
父组件想要对子组件通信，通过子组件中的props来进行通信
props
类型：Array | Object
详细：
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
你可以基于对象的语法使用以下选项：
- type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
-
default：any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 -
required：Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。 -
validator：Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。
简单的事例：
基本结构
<div id="app">
<cpn :cmovies="movies"></cpn>
</div>
通过v-bind动态绑定子组件的cmovies，将父组件的movies传入到子组件的cmovies中
子组件中的cmovies在props中
const cpn = {
template: '#p1',
props: {
cmovies: {
type: Array
}
},
data() {
return {}
}
}
父组件中的movies
const app = new Vue({
el: '#app',
data: {
movies: ['海王','钢铁侠']
},
components: {
cpn: cpn
}
})
子组件成功接收到父组件传来的movies
子组件向父组件通信
子组件想要传递东西给父组件，则需通过自定义事件来传递信息
vm.$emit( eventName, […args] )
参数：
- {string} eventName
- […args]
触发当前实例上的事件。附加参数都会传给监听器回调
<div id="app">
<cpn @itemclick='cpnclick'></cpn>
</div>
子组件
<template id="p1">
<div>
<button v-for="item in categories" @click="btn(item.name)">
{{item.name}}
</button>
</div>
</template>
const cpn = {
template: '#p1',
data() {
return {
categories: [
{id: 'aaa',name: '热门推荐'},
{id: 'bbb',name: '手机数码'},
{id: 'ccc',name: '家用家电'},
{id: 'ddd',name: '电脑办公'}
]
}
},
methods: {
btn(item) {
//发射事件
this.$emit('itemclick',item)
}
}
}
子组件中的btn方法实现将数据发送给父组件
每点击这个按钮就将按钮的名字传给父组件
父组件
const app = new Vue({
el: '#app',
data: {
message: '父组件',
},
components: {
cpn: cpn
},
methods: {
cpnclick(item) {
console.log('我接收到了',item)
}
}
})
父组件中定义了一个接收的方法cpnclick(item)，item就是接收到的值
父子组件双向绑定
如何实现父组件的值改了，子组件也该，子组件的值改了，父组件的值也跟着该。
先看实现效果：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>父组件data:{{num1}}</h1>
<cpn :cnum1="num1" @smnumber1="number1"></cpn>
</div>
<template id="cpn">
<div>
<h1>子组件props:{{cnum1}}</h1>
<h1>子组件smnumber1: {{smnumber1}}</h1>
<input type="text" :value="cnum1" @input="inputnumber1">
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num1: 10
},
methods: {
number1(value) {
this.num1 = Number(value)
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
smnumber1: this.cnum1
}
},
props: {
cnum1: Number
},
methods: {
inputnumber1(event) {
this.smnumber1 = event.target.value
this.$emit('smnumber1',this.smnumber1)
}
}
}
}
})
</script>
</body>
</html>