[前端开发]Vue父子组件的通信及访问

父传子 props

子传父 自定义事件emit

props传数组

props:['cmovies','cmessage']


props传对象

props:{
//1.类型限制
cmovies:Array,
cmessage:String
//2.提供一些默认值
cmessage:{
type:String,
default:'你好啊', //默认值
required: true //设置为必传值(cmessage)
}
cmovies:{
type:Array,
default(){
return []
}
}//当类型为数组时，default 返回的也是数组[]
cinfo:{
type:Object,
default(){
return {}
}
}//当类型为对象时，返回的也是对象{}
}


vue实例

<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>


用v-bind来绑定子组件和父组件中的数据，调用的时候用子组件的

模板cpn

<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
{{cmessage}}
</div>
</template>


cpn组件

const cpn = {
template: '#cpn',
props:['cmovies','cmessage'],
data(){
return{}
}
}


为子组件设置两个props（属性），在使用时可以用v-bind绑定数据

new vue

var vm = new Vue({
el: '#app',
data: {
message:'你好啊',
movies:['加勒比海盗','海贼王','海王','海尔兄弟']
},
methods: {},
components:{
cpn
}
});


父子传值 props驼峰标识

为什么不用cInfo而用cinfo呢

v-bind不支持驼峰

childMyMessage要写成child-my-message

子传父

当子传父时，就需要自定义事件了

v-on来监听dom事件，也可用于组件之间的自定义事件

流程

在子组件中，通过 $emit() 来触发事件，在父组件中，用v-on来监听事件

//父组件
<div id="app">//用v-on来监听事件
<cpn @item-click="cpnClick"></cpn>
</div>


//子组件
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">
{{item.name}}</button>
</div>
</template>


//cpn子组件const cpn = {
template:'#cpn',
data(){
return{
categories: [
{ id: 'aaa', name: '热门推荐' },
{ id: 'bbb', name: '手机数码' },
{ id: 'ccc', name: '家用家电' },
{ id: 'ddd', name: '电脑办公' },
]
}
},
methods:{
btnClick(item){
//子组件发射了一个自定义事件
this.$emit('item-click',item)
}
},
}


//new vue
var vm = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
cpnClick(item){
console.log('cpnClick',item)
}
},
components: {
cpn
}
});


父访问子$children $refs

• $children

cpn: {
template: '#cpn',
data(){
return{
name:'黄开然'
}
},
methods: {
showMessage() {
console.log('showMessage')
}
}
}
}


如何在父组件中调用showMessage()？

<div id="app">
<cpn></cpn>
<button @click="btnClick">button</button>
</div>var vm = new Vue({
el: '#app',
data: {},
methods: {
btnClick() {
console.log(this.$children)
for(let c of this.$children){
console.log(c.name)
c.showMessage()
}
}
}


• refs

默认是个空的对象

一个类似id的标识

使用：

<cpn ref="aaa"></cpn>
methods: {
btnClick() {
console.log(this.$refs.aaa.name)
}
},


子访问父 $parent $root

不常用