在vue之中,父子组件通信的方法如下图
1.父组件向子组件传值(props)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//父组件模板
<div id="app">
<!-- 使用v-bind绑定属性才能传递过来对应的值 movies:父组件的属性 cmives:子组件定义接收的变量名-->
<cpn :cmives="movies"></cpn>
</div>
<!-- 子组件的模板(分离式写法) -->
<template id="cpn">
<div>
{{cmives}}
</div>
</template>
<script src="../vue.js/vue.js"></script>
<script>
//父传子:props
//子组件
const cpn= {
template: '#cpn',
props:['cmives'],
}
//父组件
const app=new Vue({
el: '#app',
data:{
message: '你喜欢',
movies:['海贼王','火影','海尔']
},
components :{
//注册子组件(语法糖省略写法)
cpn
}
})
</script>
</body>
</html>
其中props传值在写法还有如下几种(上文中是关于数组的写法)
//1.类型限制
//props定义成一个对象
props:{
cmovies:Array,
cmessage:String
}
//2.提供默认值
props:{
cmessage:{
限制类型//
type:String,
//默认值
default:'aaaa',
//必须属性(当required:true时,使用组件必须传递cmessage值,否则报错)
required:true
}
}
2.子组件向父组件传值(emit)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 父组件的模板 -->
<div id="app">
<!-- 3.父组件监听子组件发射的数据
itemclick:子组件发射的属性名
cpnClick:父组件接收的方法
-->
<cpn v-on:itemclick="cpnClick"></cpn>
</div>
<!-- 子组件的模板(分离式写法) -->
<template id="cpn">
<div>
<!-- 1.子组件的按钮触发点击事件 -->
<button v-for="item in buttenList" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script src="../vue.js/vue.js"></script>
<script>
//子组件
const cpn= {
template: '#cpn',
data(){
return {
//子组件的数据
buttenList: [
{id: 'aaa', name: '第一'},
{id: 'bbb', name: '第二'},
{id: 'ccc', name: '第三'},
{id: 'ddd', name: '第四'},
]
}
},
methods:{
//子组件的点击事件
btnClick(item){
//2.子组件发射事件
this.$emit('itemclick',item)
}
}
}
//父组件
const app=new Vue({
el: '#app',
data:{
message: '你喜欢',
},
components :{
cpn
},
methods:{
//4.父组件的接收方法
cpnClick(item){
//输出子组件传递到父组件的数据
console.log('cpnClick',item);
}
}
})
</script>
</body>
</html>
显示结果如下