vue组件通信

最新推荐文章于 2023-03-25 23:15:46 发布

Lin'er jingle

最新推荐文章于 2023-03-25 23:15:46 发布

阅读量126

点赞数

分类专栏： vue.js

vue.js 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

vue组件通信

注意：组件通信，无论效果是如何的， Vue都是单向数据流（组件之间的数据通信）

父子组件通信

绑定的是简单类型数据

父组件中定义数据，通过单向数据绑定的形式，将数据绑定在子组件身上，属性是自定义属性，
子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称
那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用

父组件中数据一旦修改，子组件数据就会修改，那么这也就是单项数据流
代码：

     <div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div id="father-box">
        <h3>xlb</h3>
        <p>我这里有 {{ price }} 元</p>
        <hr>
        <Son v-bind:price="price"></Son>
        
        <Son :price="price"></Son>
        </div>
    </template>
    <template id="son">
        <div>
            <h3>hello</h3>
            <p>我这里也有 {{ price }} 元</p>
        </div>
    </template>

     Vue.component('Father',{
        template: '#father',
        data(){
            return {
                price: 1000
            }
        }
    })
    Vue.component('Son',{
        template: '#son',
        props: ['price']
    })

    new Vue({
        el: '#app'
    })

子父组件通信（效果上像，间接的使用了父组件的东西）【不推荐大家使用】

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

父组件中的数据是一复杂数据类型，那么父组件绑定数据的时候，给子组件的是一个引用地址
子组件可以通过这个引用地址，修改这个数据
效果上像，子组件和父组件通信了，违背单项数据流
代码：

     <div id="app">
         <Father></Father>
     </div>
     <template id="father">
         <div class="father-box">
             <h3>xlb</h3>
             <p>有钱 {{ getmoney.money }} </p>
             <hr>
             <Son :getmoney="getmoney"></Son>
         </div>
     </template>
     <template id="son">
         <div class="son-box">
             <h3>dlb</h3>
             <input type="text" v-model="getmoney.money">
             <p> 收到{{ getmoney.money }} </p>
         </div>
     </template>

     Vue.component('Father',{
         template: '#father',
         data(){
             return {
                 getmoney: {
                     money: 1000
                 }
             }
         }
     })
     Vue.component('Son',{
         template: '#son',
         props: ['getmoney']
     })

     new Vue({
         el: '#app'
     })

父组件可以传递一个方法给子组件

父组件定义方法，然后将这个方法通过单向数据绑定的形式传递给子组件
子组件通过props属性接收，然后通过 @click = “方法名”
代码：

     <div id="app">
         <Father></Father>
     </div>
     <template id="father">
         <div class="father-box">
             <h3>xlb</h3>
             <p>我有 {{ money }} 钱</p>
             <Son :getmoney="getmoney"></Son>
         </div>
     </template>
     <template id="son">
         <div class="son-box">
             <h3>dlb</h3>
             <button @click="getmoney(1000)">
                 给你钱
             </button>
         </div>
     </template>

     Vue.component('Father',{
         template: '#father',
         data(){
             return {
                 money: 0
             }
         },
         methods: {
             getmoney(value){
                 this.money += value
             }
         }
     })
     Vue.component('Son',{
         template: '#son',
         props: ['getmoney']
     })

     new Vue({
         el: '#app'
     })

通过自定义事件来实现通信

父组件中定义数据和方法（方法时用来操作数据的）
在子组件身上绑定自定义事件

子组件定义方法，在这个方法中通过 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'
  })

非父子组件通信

使用ref来绑定组件，（注意：ref也可以绑定DOM元素）【ref链】

在父组件的模板中，使用ref = refName 绑定在两个兄弟组件身上
在任意一个子组件中，就可以通过 this. $p a r e n t .$ refs.refName 就可以获得另一个子组件了，同时这个自组件身上的数据和方法同样也得到了
代码：

      <div id="app">
          <Father></Father>
      </div>
      <template id="father">
          <div>
              <h3>father</h3>
              <hr>
              <Boy ref="boy"></Boy>
              <hr>
              <Girl ref="girl"></Girl>
          </div>
      </template>
      <template id="boy">
          <div>
              <h3>boy</h3>
          <p>我有 {{cash}} 元</p>  
          </div>
      
      </template>
      <template id="girl">
          <div>
              <h3>girl</h3>
          <button @click="givemoney">给钱</button>
          </div>
          
      </template>

      Vue.component('Father',{
          template: '#father'
      })
      Vue.component('Boy',{
          template: '#boy',
          data () {
              return {
                  cash: 2000
              }
          },
          methods: {
              getmoney (value) {
                  this.cash += value
              }
          }
      })
      Vue.component('Girl',{
          template: '#girl',
          data () {
              return {
                  money: 1000
              }
          },
          methods: {
              givemoney () {
                  this.$parent.$refs.boy.getmoney( this.money )
              }
          }
      })
      new Vue({
          el: '#app'
      })

通过事件总线（bus）

它是通过事件的发布（声明），以及事件的订阅（触发）来做的
首先在js中创建一个bus对象（vm）
```
  var bus = new Vue()
```
在Count组件中定义数据，和修改数据的方法
在Count组件中通过 created 钩子，进行bus事件的发布

    created: {
      bus.$on('add',this.addCount)
    }

在MyButton组件的方法中通过 bus进行事件的订阅

    increment () {
      bus.$emit( 'add' )
    }

示例代码：

    <div id="app">
        <my-button></my-button>
        <Count></Count>
    </div>
    <template id="my-button">
        <div>
            <button @click="increment">increment</button>
        </div>
    </template>
    <template id="count">
        <div>
            <h3> {{ count }} </h3>
        </div>
    </template>

    var bus = new Vue();
    Vue.component('my-button',{
        template: '#my-button',
        methods: {
            increment () {
                bus.$emit('add')
            }
        }
    })
    Vue.component('Count',{
        template: '#count',
        data () {
            return {
                count: 0
            }
        },
        methods: {
            addcount (){
                this.count ++
            }
        },
        created () {
            bus.$on('add',this.addcount)
        }
    })
    new Vue({
        el: '#app'
    })