组件的通信

最新推荐文章于 2023-07-26 14:13:40 发布

cfr1994

最新推荐文章于 2023-07-26 14:13:40 发布

阅读量161

点赞数

分类专栏： Vue 前端框架文章标签：组件通信父子通信子父通信非父子通信 ref / bus

本文链接：https://blog.csdn.net/cfr1994/article/details/102922380

版权

Vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端框架

9 篇文章 0 订阅

订阅专栏

组件的通信

为什么要进行组件通信？
组件是一个聚合体，将来项目要合并，那么各个组件之间必然需要建立联系，这个联系就是数据通信
data选项为什么是一个函数？
组件是一个聚合体，也是一个整体，它需要一个独立的作用空间，也就是它的数据需要是独立的，目前js的最大特点是函数式编程，而函数恰好提供了一个独立作用域，所以我们data在出根组件外都是函数
为什么data函数需要返回一个返回值，返回值还是对象，不能是数组吗？
Vue通过es5的Object.definePerproty属性对一个对象进行getter和setter设置，而data选项是作为Vue深入响应式核心的选项

分类

父子组件通信
- 过程：
  - 父组件将自己的数据同 v-bind 绑定在子组件身上
  - 子组件通过 props属性接收

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <!-- 使用单项数据绑定将一个数据绑定给一个自定义的属性 -->
      <Son :money = "money" />
    </div>
  </template>
  <template id="son">
    <div>
      <p> {{ money }} </p>
      <p> {{ money + 20 }} </p>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 4000
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    /* 子组件通过props选项来接收属性，接收到的属性可以像全局变量一样在组件的模板中使用 */
    props: ['money']
    /* props属性数据验证 - js是弱类型语言 */
    props: {
      // 验证数据类型
      // 'money': Number // String Boolean Object Array
      // 验证数据大小【判断条件】
      // 'money': {
      //   validator ( val ) { // 验证函数
      //     return val > 3000
        }
      }
      /* vue3.0使用ts,ts是强类型 */
      // TypeScript [ TS ]
      // 插件 vue-validator 等也可以验证
    }
  })
  new Vue({
    el: '#app'
  })
</script>

子父组件通信
- 通过自定义事件
  - 事件的发布
    - 通过绑定元素身上实现
  - 事件的订阅
    - 通过 this.$emit 触发

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <p> {{ num }} </p>
      <!-- 自定义事件 -->
      <Son @hongbao = "get"/>
    </div>
  </template>
  <template id="son">
    <div>
      <button @click = "give"> 发红包 </button>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      get ( val ) {
        this.num = val
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 2000
      }
    },
    methods: {
      give () {
        this.$emit('hongbao',this.money)
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

非父子组件通信
- 子父组件通信 ref 链 + 父子组件通信 props【自定义属性】

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> father组件 </h3>
      <hr>
      <!-- 使用自定义属性形式将一个方法传递给子组件 -->
      <Girl :aa = "getSon"></Girl>
      <hr>
      <Son ref = "son"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> son组件 </h3>
      <p v-if = "flag"> Vue 1.0 </p>
      <p v-else> Vue 2.0 </p>
    </div>
  </template>
  <template id="girl">
    <div>
      <h3> girl组件 </h3>
      <button @click = "bb"> btn </button>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  Vue.component('Father',{
    template: '#father',
    methods: {
      getSon () {
        console.log( this )
        this.$refs.son.changeFlag()
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    /* 组件是独立的，自己的数据自己改 */
    data () {
      return {
        flag: true 
      }
    },
    methods: {
      changeFlag () {
        this.flag = !this.flag 
      }
    }
  })
  Vue.component('Girl',{
    template: '#girl',
    props: ['aa'],
    methods: {
      bb () {
        this.aa()
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

非父子组件通信
- bus事件总线

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> father组件 </h3>
      <hr>
      <!-- 使用自定义属性形式将一个方法传递给子组件 -->
      <Girl></Girl>
      <hr>
      <Son></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> son组件 </h3>
      <p v-if = "flag"> Vue 1.0 </p>
      <p v-else> Vue 2.0 </p>
    </div>
  </template>
  <template id="girl">
    <div>
      <h3> girl组件 </h3>
      <button @click = "bb"> btn </button>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 定义了实例bus - bus上有 $on $emit */
  var bus = new Vue()

  Vue.component('Father',{
    template: '#father',
  })
  Vue.component('Son',{
    template: '#son',
    /* 组件是独立的，自己的数据自己改 */
    data () {
      return {
        flag: true 
      }
    },
    mounted () {
      // console.log( 'mounted' )
      /* mounted 表示组件挂载结束，也就是我们可以在View视图中看到这个组件了，也就是事情做完了 */
      /* 这个函数会自动执行 */
      var _this = this 
      /* 通过bus绑定了自定义事件 */
      // bus.$on( 自定义事件名称，执行的事件处理程序 )
      bus.$on('aa',function () {
        _this.flag = !_this.flag 
      })
    }
  })
  Vue.component('Girl',{
    template: '#girl',
    methods: {
      bb () {
        bus.$emit('aa')
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>