Vue组件通信

最新推荐文章于 2024-08-22 10:38:34 发布

前端xqf

最新推荐文章于 2024-08-22 10:38:34 发布

阅读量102

点赞数

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

本文链接：https://blog.csdn.net/weixin_42635130/article/details/90678592

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

组件通信 – 单项数据流 >9种

父子组件通信
1. props接收
  父子组件通信：父组件将自己的数据传递给子组件
2. 父组件将自己的数据通过属性绑定的形式传递给子组件
3. 子组件在自己的配置项中通过 props 来接收这个属性
  Vue.component(‘Son’,{
  template: ‘#son’,
  // props: [‘aa’],
  props: {
  // 属性：属性的数据类型给数据做属性验证，验证数据类型
  ‘aa’: Number
  }
  })
4. 这个属性可以直接向全局变量一样使用
我老爸给了我：{{ aa }} 钱

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是father </h3>
      <Son :aa = "money"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son </h3>
      <p> 我老爸给了我：{{ aa }} 钱 </p>
    </div>
  </template>
</body>
<script>
Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: '1000'
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    // props: ['aa']
    props: {
      // 属性： 属性的数据类型  给数据做属性验证，验证数据类型
      'aa': Number 
    }
  })

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

子父组件通信
1. 自定义事件
  子组件将一个数据发送给父组件
如何实现：自定义事件

流程：
1. 父组件中定义一个数据，然后在methods定义一个方法用来修改这个数据
Vue.component(‘Father’,{
template: ‘#father’,
data () {
return {
num: 0
}
},
methods: {
add ( val ) {
console.log(‘add’)
this.num += val
}
}
})
2. 父组件通过自定义事件的形式，将父组件的一个方法传递给子组件
<Son @aa = ‘add’>
3. 子组件可以通过 this. $e m i t (自定义事件名称，参数 1 ，参数 2 . . .) 来订阅这个自定义事件 t h i s .$ emit(‘aa’,this.money)

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是father </h3>
      <p> 这里有 {{ num }} 钱 </p>
      <hr>
      <Son @aa = 'add'></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son </h3>
      <button @click = "give"> give money </button>
    </div>
  </template>
</body>
<script>
Vue.component('Father',{
    template: '#father',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      add ( val ) {
        console.log('add')
        this.num += val
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give () {
        this.$emit('aa',this.money)
      }
    }
  })

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

 2. 父组件将一个方法直接通过单向数据绑定的形式传递给子组件，子组件通过props接收，然后直接使用

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是father </h3>
      <p> 我这里有 {{ num }} 钱 </p>
      <hr>
      <Son :add = 'add'></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son </h3>
      <button @click = "add( money )"> give money </button>
    </div>
  </template>
</body>
<script>
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      add ( val ) {
        this.num += val
      }
    }
  })

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

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

 3. 父组件可以将一个对象型的数据传递给子组件，子组件修改了这个数据，父组件也同样会修改
    - 这个形式违反了单向数据流，用的少

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> father </h3>
      <p> 我有{{ jingku.money }} 钱 </p>
      <hr>
      <Son :jingku = 'jingku'> </Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> son </h3>
      <hr>
      <input type="text" v-model = "jingku.money">
      <p> 我拿了{{ jingku.money }} 钱 </p>

    </div>
  </template>
</body>
<script>
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        jingku: {
          money: 1000
        }
      }
    }
  })

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

非父子组件通信
1. 使用ref链绑定

<body>
  <div id="app">
    <Brother ref = "brother"></Brother>
    <hr>
    <Sister ref = 'sister'></Sister>
    <div ref = 'box'></div>
  </div>
  <template id="brother">
    <div>
      <h3> 这里是brother </h3>
      <button @click = 'give'> give sister  money </button>
    </div>
  </template>
  <template id="sister">
    <div>
      <h3> 这里是sister </h3>
      <p> 我有 {{ jk }} </p>
    </div>
  </template>
</body>
<script>
  /* 
    非父子组件通信第一种形式 ： ref链绑定
    ref不仅可以绑定组件，也可以绑定普通元素

    业务： 别的组件中获取另外一个组件？ 
    解决： 绑定ref 
  */

  Vue.component('Brother',{
    template: '#brother',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give () {
        this.$parent.$refs.sister.jk = this.money
      }
    }
  })
  Vue.component('Sister',{
    template: '#sister',
    data () {
      return {
        jk: 0
      }
    }
    
  })

  new Vue({
    el: '#app',
    mounted () {
      console.log('====================================');
      console.log(this.$refs);
      console.log('====================================');
    }
  })
</script>

 2. 使用事件总线（bus总线）

<body>
  <div id="app">
    <Brother></Brother>
    <hr>
    <Sister></Sister>
  </div>
  <template id="brother">
    <div>
      <h3> 这里是brother </h3>
      <button @click = 'give'> give </button>
    </div>
  </template>
  <template id="sister">
    <div>
      <h3> 这里是sister </h3>
      <p> 弟弟给了我 {{ jk }} </p>
    </div>
  </template>
</body>
<script>
  /* 
    非父子组件通信第二种形式： 事件总线 
        事件的发布： 、$on
        事件的订阅    $emit

        通过 new Vue 在得到另外一个实例

    
  */

  var bus = new Vue()
  Vue.component('Brother',{
    template: '#brother',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give () {
        console.log(this.money)
       bus.$emit('aa',this.money)
      }
    }
  })


  Vue.component('Sister',{
    template: '#sister',
    data () {
      return {
        jk: 0
      }
    },
    mounted () {
      bus.$on('aa',( val ) => {
        this.jk += val
      })
    }
  })

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