Vue的组件通讯

最新推荐文章于 2021-12-05 12:28:17 发布

置顶 Layla 琳

最新推荐文章于 2021-12-05 12:28:17 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/weixin_43424101/article/details/84351628

版权

组件通讯的说明：

1 组件是一个独立、封闭的个体

2 组件中的数据，默认情况下，只能在组件内部使用

3 在使用组件化开发项目的时候，多个组件之间可能需要相互配置，也就是说

可能需要使用另一个组件中的数据。这就产生了组件之间通讯的问题了

组件通讯的三种情况：

1 父组件将数据传递给子组件

2 子组件将数据传递给父组件

3 非父子组件（兄弟）之间的通讯

一、组件通讯——父到子=============================================

<body>

<!--

parentmsg="123" 表示父组件在使用子组件的时候，给子组件传递数据叫 parentmsg

这是写死的数据

-->

<!--

传递动态数据：

注意：需要通过 v-bind:parentmsg="msg" 来作为动态传递的数据，此时，msg才表示 vm 实例中的数据msg；如果不加 v-bind: 那么 'msg' 就是一个字符串

-->

</div>

// 需求：父组件将数据传递给子组件

// 父组件： Vue实例

// 子组件： hello组件

// 通过属性传递的方式，来实现父子组件的通讯

// 1 在组件中通过 props 配置项，来说明该组件能够接受什么样的数据

// 2 在使用组件的时候，通过属性的方式，来给组件传递数据

// 注意：props是只读属性！！！无法修改

Vue.component('hello', {

<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>

<h1>父组件接受到子组件传递过来的数据：{{ msg }}</h1>

</div>

Vue.component('child', {

<div>

<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>

// 非父子组件（兄弟组件）：

// 场景：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', {

<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', {

<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>

Layla 琳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的组件通讯

组件通讯的说明： 1 组件是一个独立、封闭的个体 2 组件中的数据，默认情况下，只能在组件内部使用 3 在使用组件化开发项目的时候，多个组件之间可能需要相互配置，也就是说可能需要使用另一个组件中的数据。这就产生了组件之间通讯的问题了组件通讯的三种情况： 1 父组件将数据传递给子组件 2 子组件将数据传递给父组件 3 非父子组件（兄弟）之间...
复制链接

扫一扫