组件通讯 的说明：
1 组件是一个独立、封闭的个体
2 组件中的数据，默认情况下，只能在组件内部使用
3 在使用组件化开发项目的时候，多个组件之间可能需要相互配置，也就是说
可能需要使用另一个组件中的数据。这就产生了 组件之间通讯 的问题了
组件通讯 的三种情况：
1 父组件 将数据传递给 子组件
2 子组件 将数据传递给 父组件
3 非父子组件（兄弟）之间的通讯
一、组件通讯——父到子=============================================
<body>
<div id="app">
<!--
parentmsg="123" 表示父组件在使用子组件的时候，给子组件传递数据叫 parentmsg
这是 写死的数据
-->
<!-- <hello parentmsg="123" test="666"></hello> -->
<!--
传递动态数据：
注意：需要通过 v-bind:parentmsg="msg" 来作为动态传递的数据，此时，msg才表示 vm 实例中的数据msg；如果不加 v-bind: 那么 'msg' 就是一个字符串
-->
<hello :parentmsg="msg" test="666"></hello>
</div>
<script src="./vue.js"></script>
<script>
// 需求： 父组件将数据传递给子组件
// 父组件： Vue实例
// 子组件： hello组件
// 通过属性传递的方式，来实现父子组件的通讯
// 1 在组件中通过 props 配置项，来说明该组件能够接受什么样的数据
// 2 在使用组件的时候，通过 属性 的方式，来给组件传递数据
// 注意：props是只读属性！！！无法修改
Vue.component('hello', {
template: `
<div>
<h1>这是子组件：hello</h1>
<p>子组件使用父组件中的数据msg： {{ parentmsg }} , {{ test }}</p>
</div>
`,
created() {
console.log('接收到属性：', this.parentmsg)
// 如果直接修改 props 的值，会报错！！！
// this.parentmsg = '修改了值'
},
// 通过该配置执行组件能够接受的数据
// props 的使用跟 data 中的数据一样
props: ['parentmsg', 'test']
})
const vm = new Vue({
el: '#app',
data: {
msg: '实例数据'
}
})
</script>
</body>
二、组件通讯——子到父=============================================
<body>
<div id="app">
<h1>父组件接受到子组件传递过来的数据：{{ msg }}</h1>
<!-- 渲染组件 -->
<!-- 2 将父组件中准备好的方法作为自定义事件传递给子组件 -->
<child @fn="fn"></child>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('child', {
template: `
<div>
<input v-model="txt" />
<button @click="send">传递数据给父组件</button>
</div>
`,
data() {
return {
txt: ''
}
},
methods: {
send() {
// 3 子组件触发传递过来的自定义事件 fn
this.$emit('fn', this.txt)
}
}
})
const vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
// 1 父组件提供一个方法
fn(arg) {
console.log('接受到子组件数据为：', arg)
this.msg = arg
}
}
})
</script>
</body>
三、组件通讯——非父子组件=============================================
<body>
<div id="app">
<jack></jack>
<rose></rose>
</div>
<script src="./vue.js"></script>
<script>
// 非父子组件（兄弟组件）：
// 场景：jack组件要对rose组件说： 'i love u'
// 发送数据的组件：jack，触发事件，传递数据
// 接受数据的组件：rose，注册事件
// 思路：
// 1 rose组件要接受数据，因此，rose组件注册事件 bus.$on('love', () => {})
// 2 jack组件要传递数据，因此，jack组件触发事件 bus.$emit('love', '要传递的数据')
// 创建一个bus
// bus 实际上就是一个空的vue实例
// 注意： 注册事件和触发事件需要使用同一个bus
const bus = new Vue()
// jack组件
Vue.component('jack', {
template: `
<div>
<h2>Jack组件：</h2>
<button @click="sendLove">告诉rose：i love u</button>
</div>
`,
methods: {
sendLove() {
// jack触发事件，将数据作为参数传递
bus.$emit('love', 'i love u')
}
}
})
// rose组件
Vue.component('rose', {
template: `
<div>
<h2>Rose组件：</h2>
<p>我是rose，jack你说啥？？？ {{ msg }}</p>
</div>
`,
created() {
// 进入页面就注册事件
bus.$on('love', (arg) => {
this.msg = arg
})
},
data() {
return {
msg: ''
}
}
})
const vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
扫一扫
1829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
