Vue.js中的组件通信

Posted 纸 飞机

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js中的组件通信相关的知识,希望对你有一定的参考价值。

组件注册

  1. Vue.component(组建名称, 组件的配置)
  2. 在组件中使用components的配置项来表示
  3. 问题:
    组件命名问题
    • 组件命名和html原生标签冲突 Header Footer ----> header footer

    • 大驼峰的写法

        Vue.componennt('ZhangJun',{
          template: '<div></div>'
        })
      
      
        <div id = "app">
          <!-- <ZhangJun></ZhangJun>   错的-->
          <zhang-jun></zhang-jun>
        </div>
      
      
        .box{
          background-color: red
        }
      
      
        box.style.backgroundColor = 'red'
      

组件通信

注意: 组件通信, 无论效果是如何的, Vue都是单向数据流(组件之间的数据通信)

  1. 父子组件通信

    • 绑定的是简单类型数据
      1. 父组件中定义数据, 通过单向数据绑定的形式, 将数据绑定在子组件身上, 属性是自定义属性,
      2. 子组件通过配置项中的props接收数据, props可以是一个数组,数组中放的是自定义属性名称
      3. 那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
      4. 父组件中数据一旦修改, 子组件数据就会修改, 那么这也就是单项数据流
  2. 子父通信(效果上像, 间接的使用了父组件的东西 ) 【不推荐大家使用】

    • 绑定复杂数据类型 --------

      1. 父组件中的数据是一复杂数据类型, 那么父组件绑定数据的时候, 给子组件的是一个引用地址
      2. 子组件可以通过这个引用地址, 修改这个数据
      3. 效果上像, 子组件和父组件通信了, 违背单项数据流
    • 父组件可以传递一个方法给子组件

      1. 父组件定义方法, 然后将这个方法通过单向数据绑定的形式传递给子组件
      2. 子组件通过props属性接收, 然后通过 @click = “方法名”
    • 通过自定义事件来实现通信

      1. 父组件中定义 数据 和 方法(方法是用来操作数据的)

      2. 在子组件身上绑定自定义事件

      3. 子组件定义方法, 在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序

          <!-- html结构代码 -->
          <div id="app">
            <King></King>
          </div>
          <template id="king">
              <div>
                <h3> I am king </h3>
                <!-- <People v-on: get = "get"></People> -->
                <p> 国库中有:{{ gk }} 钱 </p>
                <People @get = "get"></People>
              </div>
          </template>
          <template id="people">
            <div>
              <h3> I am people </h3>
              <button @click = "give"> 交钱 </button>
            </div>
          </template>
        
        <!-- js代码 -->
          Vue.component('King',{
            template: '#king',
            data () {
              return {
                gk: 0
              }
            },
            methods: {
              get( value ){
                this.gk += value 
              }
            }
          })
          Vue.component('people',{
            template: '#people',
        
            data () {
              return {
                money: 2000
              }
            },
            methods: {
              give () {
                this.$emit('get', this.money/2)
              }
            }
          })
          new Vue({
            el: '#app'
          })  
        
  3. 非父子组件通信

    • 使用ref来绑定组件, (注意:ref也可以绑定DOM元素) 【ref链】

        1. 在父组件的模板中, 使用ref = refName 绑定在两个兄弟组件身上
        1. 在任意一个子组件中, 就可以通过 this. p a r e n t . parent. parent.refs.refName 就可以获得另一个子组件了, 同时这个自组件身上的数据和方法同样也得到了
    • 通过事件总线(bus)

        1. 它是通过事件的发布(声明), 以及事件的订阅(触发)来做的
        1. 首先在js中 创建一个bus对象(vm)
          var bus = new Vue()
        
        1. 在Count组件中定义数据, 和修改数据的方法
        1. 在Count组件中 通过 created 钩子 , 进行bus事件的发布
            created: {
              bus.$on('add',this.addCount)
            }
        
        1. 在MyButton组件的方法中通过 bus进行事件的订阅
            increment () {
              bus.$emit( 'add' )
            }
        
  4. 多组件状态共享

    • 使用 Vue-Router
    • 使用状态管理工具 Vuex

以上是关于Vue.js中的组件通信的主要内容,如果未能解决你的问题,请参考以下文章

将 vue.js 组件子中的对象或值发送到父通信

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue.js 父子组件通信的十种方式

Vue2.x中的父子组件相互通信

Vue.js组件的通信之子组件向父组件的通信

vue.js 2.0 通信最佳实践