常见使用场景可以分为三类:
父子组件通信: props;children; provide / inject ; ref ;
listeners
兄弟组件通信: eventBus ; vuex
跨级通信: eventBus；Vuex；provide / inject 、
一、父传子---props
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 1.给子组件通过自定义属性绑定父组件需要传递的数据 -->
<son :zdy="msg"></son>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
msg: '磊哥无敌'
},
methods: {
},
components: {
'son': {
// 2.在子组件中通过props属性，props属性是一个数组，可以获取到组件上的属性值
props: ['zdy'],
template: `
<div>
<h3>轻颜相机</h3>
<h4>{{zdy}}</h4>
</div>
`
}
}
})
</script>
</body>
</html>
image.png
二、子传父
on(监听事件，触发methods方法) 监听事件
<div id="app">
<p>{{fmsg}}</p>
<input type="button" value="父组件按钮" v-on:click="update">
<!-- 2. 监听子组件上面的 handle-info 自定义事件 -->
<!-- 注意 getInfo如果不写小括号，那么methods中第一个参数就是自定义事件中传递过来的值；如果需要额外传递参数，需要使用$event来接收自定义事件传的参 -->
<son @handle-info="getInfo($event,10)" :fmsg="fmsg"></son>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
fmsg: '你无法拒绝的理由',
},
methods: {
update () { },
// 3. 通过父组件的methods中被触发的方法接收子组件传递参数
getInfo (val, num) {
console.log(val, num) //'我还有现在的素质我很欣慰!'
this.fmsg = val.info
}
},
components: {
'son': {
props: ['fmsg'],
data: function () {
return {
info: '我还有现在的素质我很欣慰!'
}
},
template: `
<div class="son">
<h3>son组件标题</h3>
<p>{{fmsg}}</p>
<input type="button" value="子组件按钮" @click="sendInfo">
</div>
`,
methods: {
sendInfo () {
// console.log(this.info)
// 子传父，需要通过自定义事件来实现
// 1. 注册自定义事件 -- 注意 自定义时间名不要使用驼峰命名法!
this.$emit('handle-info', { info: this.info })
}
}
}
}
})
</script>
image.png
- 关于组件之间的通信方式比较常用的就是上面所提到的两种还有一个vuex,看到了一篇比较详细的关于组件之间的八种通信方式，附链接：https://www.jb51.net/article/167304.htm
