组件关系
Vue只有两种关系， 父子组件 非父子组件
组件通信
- 父子通信
当我们需要把父组件中的数据传递给子组件时，使用父子通信
父组件
const Parent = {
template: `
<div>
<child :m="msg"></child>
</div>
`,
data () {
return {
msg: "这是父组件中的数据"
}
}
}
子组件
const Child = {
template: `
<div>{{m}}</div>
`,
// 设置prop接收
props: ['m']
}
- 子父通信
当我们要把子组件中的数据，传递给父组件时，使用子父通信
父组件
const Parent = {
template: `
<div>
<child :msg="msg" @send:msg="getMsg"></child>
</div>
`,
data () {
return {
msg: '父组件中的数据'
}
},
methods: {
getMsg (msg) {
this.msg = msg
}
}
}
子组件
const Child = {
template: `
<div>
{{msg}}
<button @click="changeMsg">点击修改msg</button>
</div>
`,
props: ['msg'],
methods: {
changeMsg () {
// this.msg = "新的内容" // 错误的 不要在子组件中直接修改父组件中传来的数据
// 正确的
this.$emit('send:msg', '子组件发过去的数据')
}
}
}
在组件标签上看到属性，那么表示对应的父组件给子组件传值，如果我们在组件标签上看到@xxx="函数" 表示父组件在监听子组件的自定义事件
<child @click="fn"></child>
<!-- 这个click不是原生事件，是自定义事件 -->
<child @click.native="fn"></child>
<!-- 如果添加了.native才会执行原生的点击事件 -->
- 非父子通信
利用的是自定义事件，因为自定义事件的监听和触发必须得是同一个this，所以我们需要一个公共的vue实例，称其为bus
bus
const bus = new Vue()
组件1
const com1 = {
template: `
<div>
<button @click="changemsg">点击修改组件2中的数据</button>
</div>
`,
methods: {
changemsg () {
bus.$emit('changeMsg', '数据')
}
}
}
组件2
const com2 = {
template: `
<div>{{msg}}</div>
`,
data () {
return {
msg: '消息'
}
},
created () {
bus.$on('changeMsg', (msg) => {
this.msg = msg
})
}
}
mvvm图示.png
