对Vue中组件通信的一些理解

最新推荐文章于 2023-06-05 19:33:18 发布

于思杨

最新推荐文章于 2023-06-05 19:33:18 发布

阅读量455

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/huhu_nihao/article/details/93786103

版权

对Vue中组件通信的一些理解

一、介绍

1. 为什么要进行组件通信？

组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件互相之间要建立联系，这个联系我们就称之为通信。

2. 组件通信的方式有以下几种：

（1）父子组件通信：

使用props来实现

（2）子父组件通信：

使用自定义事件实现

（3）非父子组件通信：

ref链：可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了（$attrs）

bus事件总线

（4）多组件状态共享（多个组件共用同一个数据）

vuex

3.自定义事件

两种方式：

（1）通过 $on 定义，通过 $emit 触发

var vm = new Vue({
    el: '#app'
  })

  // 自定义事件的定义（ 发布 ）

  // vm.$on(自定义事件的名称，自定义事件的事件处理程序)

  vm.$on( 'aa', function () {
    console.log( 'aa' )
  })

  //自定义事件的触发 （ 订阅 ）

  // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)

  vm.$emit( 'aa' )

（2）通过绑定在组件身上定义，通过 $emit 触发

<Son @aa = "fn"/>

使用：子父通信

二、父子组件通信

我们先看下面这个案例：

<body>
    <div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div>
            <h3>这里是父组件</h3>
            <hr>
            <Son :aa = "money" :mask-flag = "maskFlag">
            </Son>
        </div>
    </template>
    <template id="son">
        <div>
            <h3>这里是son组件</h3>
            <p> 父亲给了我{{ aa }}钱 </p>
            <p> {{ maskFlag }} </p>
        </div>
    </template>
</body>
<script>
    Vue.component('Father',{
        template:"#father",
        data () {
            return {
                money: 2000,
                maskFlag: 1000000
            }
        }
    })
    Vue.component('Son',{
        template: '#son',
        props: ['aa','maskFlag']
    })


    new Vue({

    }).$mount('#app')
</script>

props:

1.在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上

<Son :aa = "money"/>

2.在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以是一个数组

Vue.component('Son',{
     template: '#son',
     props: ['aa']
})

3.在子组件模板中，接收到的属性可以像全局变量一样直接使用

<p> 父亲给了我  {{ aa }}  钱  </p>

大家心中可能会有如下几个问题：

问题1：props接收的money和子组件上绑定的自定义属性money是不是同一个？

答：一般都是，我们通常会把自定义属性和数据写成一致

问题2：为什么data要定义为一个函数？

答：

1.组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据

2.也就是说这个数据应该有独立作用域，也就是有一个独立的使用范围，这个范围就是这个组件内

3.js最大的特征就是：函数式编程

问题3：为什么data要有返回值？返回值还是一个对象？

答：

1.因为Vue是通过observer来观察data选项的，所以必须要有返回值

2.因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置

三、子父组件通信

先看下面的案例：

<body>
    <div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div>
            <h3> 这里是father组件 </h3>
            <p> 儿子给了我  {{ money }} </p>
            <Son @give = "getHongbao"></Son>
        </div>
    </template>
    <template id="son">
        <div>
            <button @click = "giveFather"> give </button>
            <h3> 这里是son组件 </h3>
        </div>
    </template>
</body>
<script>
   Vue.component('Father',{
       template: '#father',
       data () {
           return {
               money: 0
           }
       },
       methods: {
           getHongbao ( val ) {
               console.log( 1 )
               this.money = val
           }
       }
   })
   Vue.component('Son',{
       template: '#son',
       data () {
           return {
               hongbao: 500
           }
       },
       methods: {
           giveFather () {
              //如何进行父组件给子组件的自定义事件触发  
              this.$emit('give',this.hongbao)
           }
       }
   })
   new Vue({
       el: '#app'
   })
</script>

子父通信流程：

1.在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上

<Son @aa = "fn"/>  //这边要注意： fn是要在父组件配置项methods中定义

这里要提一下自定义事件的两种方法：

（1）自定义事件通过 $o n 定义，$ emit触发

（2）通过绑定在组件身上定义，通过 $emit 触发

2.在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件

 Vue.component('Son',{
     template: '#son',
     data () {
       return {
         hongbao: 500
       }
     },
     methods: {
       giveFather () {
         //如何进行父组件给子组件的自定义事件触发
         this.$emit('give',this.hongbao)
       }
     }
   })

3.将子组件定义的事件处理程序giveFather，绑定在子组件的按钮身上

  <template id="son">
    <div>
      <button @click = "giveFather"> give </button>
      <h3> 这里是son组件 </h3>
    </div>
  </template>

四、非父子组件通信

1.ref链

案例：

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <!-- 组件中根元素必须唯一 -->
    <div>
      <h3> 这里是father  </h3>
      <button @click = "look"> 点击查看father的this </button>
      <p> father的 n: {{ n }} </p>
      <hr>
      <Son ref = "son"></Son>
      <Girl ref = "girl" :n = "n"></Girl>
    </div>
  </template>

  <template id="son">
    <div>
      <h3> 这里是 son 1 </h3>
    </div>
  </template>

  <template id="girl">
      <div>
        <h3> 这里是girl </h3>
        <button @click = "out"> 输出girl的this </button>
      </div>
  </template>
</body>
<script>
  /* 

  通过ref绑定组件后，我们发现在他们的共同父组件的 $refs里面可以找到子组件
 */
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        n: 0
      }
    },
    methods: {
      look () {
        this.n = this.$refs.son.money 
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 1000
      }
    }
  })

  Vue.component('Girl',{
    template: '#girl',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      out () {
        console.log( this )
        console.log( this.$attrs )
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

2.bus事件总线

bus事件总线，我们是通过 $on来定义事件，通过 $emit来触发事件

案例：哥哥揍弟弟，弟弟哭

<body>
    <div id ="app">
        <Bro></Bro>
        <Sma></Sma>
    </div>
    <template id="big">
        <div>
            <h3> 这里是哥哥组件 </h3>
            <button @click = "hick"> 揍 </button>
        </div>
    </template>

    <template id="small">
        <div>
            <h3> 这里是弟弟组件 </h3>
            <p v-show = "flag"> 呜呜呜呜呜呜 </p>
        </div>
    </template>
</body>
<script>
    var bus = new Vue() // bus原型上是不是有  $on   $emit 

    Vue.component('Bro',{
        template: '#big',
        methods: {
            hick () {
               bus.$emit('aa') 
            }
        }
    })

    Vue.component('Sma',{
        template: '#small',
        data () {
            return {
                flag: false
            }
        },
        mounted () { 
            //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
            // mounted这个钩子函数的触发条件是组件创建时会自动触发
            // 事件的声明
            var _this = this
            bus.$on('aa',function () {
                _this.flag = true
                console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
            })
        }
    })

    new Vue({
        el: '#app'
    })
</script>

bus事件总线流程：

bus事件总线，我们是通过 $on来定义事件，通过 $emit来触发事件

（1）在其中一个组件的挂载钩子函数上做事件的声明

Vue.component('Sma',{
            template: '#small',
            data () {
              return {
                flag: false
              }
            },
            mounted () { //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
              // mounted这个钩子函数的触发条件是组件创建时会自动触发
              // 事件的声明
              var _this = this 
              bus.$on( 'aa',function () {
                _this.flag = true
                console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
              })
            }
          })

（2）在另一个组件中通过 bus.$emit( ‘aa’ )来触发这个自定义事件

五、非常规组件通信1（使用自定义事件实现子父组件通信）

业务：进行子父组件通信

理解：使用自定义事件实现

实现的流程：父组件将一个方法通过属性绑定的形式给了子组件，子组件先是通过props接收这个方法，再执行这个方法

<body>
    <div id="app">
        <Father></Father>
    </div>

    <template id="father">
        <div>
            <h3> 这里是father的组件 </h3>
            <p> 这里是父组件的n: {{ n }} </p>
            <Son :add = "add"></Son>
        </div>
    </template>

    <template id="son">
        <div>
            <h3> 这里是son组件 </h3>
            <button @click = "add(money)"> give </button>
        </div>
    </template>
</body>
<script>
    Vue.component('Father',{
        template: '#father',
        data () {
            return {
                n:0
            }
        },
        methods: {
            add (val) {
                this.n = val
            }
        }
    })

    Vue.component('Son',{
        template: '#son',
        data () {
            return {
                money: 1000
            }
        },
        props: ['add']
    })
    new Vue({
       el: '#app'
   })
</script>

但这个方法不推荐大家使用，因为MVVM框架是单向数据流，但是上面的方法违背了单向数据流

六、非常规组件通信2

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3>这里是father组件</h3>
      <p> father: 小金库: {{ xiaojinku.money }} </p>
      <Son :xiaojinku = "xiaojinku"></Son>

    </div>
  </template>

  <template id="son">
    <div>
      <h3>这里是son组件</h3>
      <button> give </button>
      <input type="text" v-model = "xiaojinku.money">
      <p> son  小金库： {{ xiaojinku.money }} </p>
    </div>
  </template>
</body>
<script>
  /* 
      父组件传递一个 对象类型  给 子组件
      子组件通过 props 接收

      就会发现： 子组件修改这个数据的时候，父组件的数据也随之改变了  ？

      why?

      因为父组件给子组件的是对象的引用地址

      这种方法我们不推荐使用  ， 违背了单向数据流

    
   */
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        xiaojinku: {
          money: 1000
        }
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    props: ['xiaojinku']
  })
  new Vue({
    el: '#app'
  })
</script>

于思杨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对Vue中组件通信的一些理解

对Vue中组件通信的一些理解一、介绍1. 为什么要进行组件通信？组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件互相之间要建立联系，这个联系我们就称之为通信。2. 组件通信的方式有以下几种：（1）父子组件通信：使用props来实现（2）子父组件通信： ...
复制链接

扫一扫