组件通信

最新推荐文章于 2021-04-25 00:21:31 发布

weixin_44889992

最新推荐文章于 2021-04-25 00:21:31 发布

阅读量78

点赞数

分类专栏： vue 文章标签：组件通信

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89459494

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

1. 父子组件通信

绑定的是简单类型数据
1. 父组件中定义数据，通过单向数据绑定的形式，将数据绑定在子组件身上，属性是自定义属性，
2. 子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称
3. 那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
4. 父组件中数据一旦修改，子组件数据就会修改，那么这也就是单项数据流

<body>
    <div id="app">
       <Father></Father>
    </div>
    <template id="father">
         <div class="father-box">
              <h3> father 组件</h3>
                <hr>
             <Son v-bind:money = "money"></Son>
              <Son :money = "money"></Son>
       </div>
    </template>
    <template id="son">
          <div class="son-box">
                  <h3> son 组件</h3>
                  <p> 我爸这个月给了我： {{ money }}生活费 </p>
          </div>
   </template>
</body>
<script>
     Vue.component('Father',{
             template: '#father',
             data(){
                    return {
                             money: 1000
                        }
                }
     })
  Vue.component('Son',{
              template: '#son',
              props: ['money']
                  })
    new Vue({
         el: '#app'
      })
</script>

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

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

<body>
      <div id="app">
         <Father></Father>
      </div>
      <template id="father">
          <div>
              <h3>father</h3>
              <p>father现在有： {{sifangqian.money}} 块 </p>
              <Son :sifangqian = 'sifangqian'></Son>
         </div>
     </template>
     <template id="son">
        <div>
           <h3>Son</h3>
           <input type="text" v-model = "sifangqian.money">
           <p> 老爸给了我：{{ sifangqian.money }}块 </p>
        </div>
    </template>
</body>
<script>
      Vue.component('Father',{
            template: '#father',
            data(){
                   return {
                          sifangqian: {
                                 money: 1000
                              }
                       }
              }
     })
     Vue.component('Son',{
                  template: '#son',
                  props: ['sifangqian']
               })
             new Vue({
                   el: '#app'
                })
</script>

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

<body>
        <div id="app">
            <King></King>
       </div>
        <template id="king">
              <div>
                  <h3> 我是国王： </h3>
                  <p> 我国库中有：{{ gk }} 钱 </p>
                  <People :getmoney = "getMoney"></People>
              </div>
      </template>
       <template id="people">
              <div>
                   <h3> 我是国王的子民 </h3>
                   <button @click = "getmoney(1000)"> 上缴 </button>
              </div>
     </template>
</body>
<script>
      Vue.component('King',{
               template: '#king',
               data(){
                    return {
                             gk: 0
                           }
                    },
               methods: {
                       getMoney(value){
                                  this.gk += value
                                }
                     }
     })
       Vue.component('People',{
                template: '#people',
                props: ['getmoney']
              })
       new Vue({
          el: '#app'
        })
</script>

通过自定义事件来实现通信
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链】
在父组件的模板中，使用ref = refName 绑定在两个兄弟组件身上
在任意一个子组件中，就可以通过 this. $p a r e n t .$ refs.refName 就可以获得另一个子组件了，同时这个自组件身上的数据和方法同样也得到了
通过事件总线（bus）
它是通过事件的发布（声明），以及事件的订阅（触发）来做的
首先在js中创建一个bus对象（vm）

var bus = new Vue()

在Count组件中定义数据，和修改数据的方法
在Count组件中通过 created 钩子，进行bus事件的发布

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

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

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

4. 多组件状态共享

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

weixin_44889992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录