Vue中怎么实现组件间数据通信

发布时间:2021-07-21 11:20:34 作者:Leah
来源:亿速云 阅读:160

这期内容当中小编将会给大家带来有关Vue中怎么实现组件间数据通信,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

        一、 父组件 => 子组件
        在上一章的时候,我们有提到过,我们可以使用 prop 选项在组件中定义一些自定义特性,当有值传递给 prop 特性时,那个 prop 特性就变成了那个组件实例的一个属性,此时我们就可以从组件上获取到接收的值。因此,这里我们就可以在使用子组件时通过 v-bind 指令动态的绑定一个 prop 特性,从而接收到父组件传递的值。
        可以看到,在下面的示例代码中,我们在子组件中通过 v-bind 指令绑定了一个 prop 特性 parenttitle,用来接收父组件 data 选项中的 title 属性,之后通过 watch 监听属性监听绑定的 parenttitle 属性,从而同步更新子组件 data 选项中的 content 属性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<body>
   <div id="app">
       <h5>
           请输入需要传递给子组件的值:<input type="text" v-model="title" />
       </h5>

       <hr />

       <child-node v-bind:parenttitle="title"></child-node>
   </div>
</body>

<template id="child">
   <div>
       <h5>
           Vue 实例中的属性值为:{{content}}
       </h5>
   </div>
</template>

<script>
   var vm = new Vue({
       el: '#app',
       data: {
           title: ''
       },
       components: {
           'childNode': {
               template: '#child',
               props: ['parenttitle'],
               data() {
                   return {
                       content: this.parenttitle
                   }
               },
               watch: {
                   parenttitle() {
                       this.content = this.parenttitle
                   }
               },
           }
       }
   })
</script>

        二、 子组件 => 父组件

        在 Vue 中存在着一个单向的下行绑定,父级组件的数据变更可以影响到子集组件,反过来则不行。在实际开发中可能会遇到当子组件的数据更新后,需要同步更新父组件的情况,那么这时我们应该怎么做呢?
        既然没办法直接通过修改 prop 选项中的属性进行更新父组件,不如让我们换一个思路思考。我们想要实现的效果,无非是当子组件数据变更时能够同步引起父组件的变更,那么,我们是不是可以在子组件数据发生变化后,触发一个事件方法,告诉父组件我数据更新了,父组件只需要监听这个事件,当捕获到这个事件运行后,再对父组件的数据进行同步变更不就可以了,整个的示意流程如下。
        那么,如何才能实现事件监听呢?
        嗯,Vue 已经帮我们实现好了解决方案。我们可以使用 v-on 事件监听器监听事件,通过 $emit 去触发当前实例上的事件。当然,这里的事件可以是 Javascript 中的原生 DOM 事件,也可以是我们自定义的事件。
        例如,在下面的代码中,当我点击传递数据按钮后,触发了子组件的 func 方法,在 func 方法中触发了子组件实例上的 show 事件,并把 input 框中的值作为参数进行传递。这时,我们在使用到子组件的地方就可以通过 v-on(@) 指令监听这个 show 事件,从而获取到传递的参数,并触发父组件的监听事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<body>
   <div id="app">
       <h5>
           子组件中的属性值为:{{msg}}
       </h5>

       <hr />

       <child-node @show="showMsg"></child-node>
   </div>
</body>

<template id="child">
   <div>
       <h5>
           请输入需要传递给父组件的值:<input v-model="childMsg" type="text" />
           <button @click="func">传递数据</button>
       </h5>
   </div>
</template>

<script>
   var vm = new Vue({
       el: '#app',
       data: {
           title: '',
           msg: '',
       },
       methods: {
           showMsg(data) {
               this.msg = data
           }
       },
       components: {
           'childNode': {
               template: '#child',
               data() {
                   return {
                       childMsg: ''
                   }
               }
               methods: {
                   func() {
                       this.$emit('show', this.childMsg)
                   }
               },
           }
       }
   })
</script>

上述就是小编为大家分享的Vue中怎么实现组件间数据通信了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Vue中如何实现组件间通信
  2. vue中怎么实现组件间参数传递

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:如何解决vue初始化项目时一直卡在Project description上的问题

下一篇:怎么用 Netty 实现简单的 RPC

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》