Vue组件通信

最新推荐文章于 2024-02-08 12:01:02 发布

weixin_45213847

最新推荐文章于 2024-02-08 12:01:02 发布

阅读量69

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45213847/article/details/93913305

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

组件通信

1. 为什么要进行组件通信？

组件通信可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起的时，这些组件相互之间要建立联系，这个联系我们就称之为通信。

2.组件通信的方式有以下几种（重点）

父子组件通信
使用props来实现
子父组件通信
自定义事件
非父子组件通信
ref链
bus事件总线
多组件状态共享（多个组件共用同一个数据）

2.1父子组件通信

  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <hr>
      <Son :money = "money" :mask-flag = "maskFlag"/>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son组件 </h3>
      <p> 父亲给了我  {{ money }}  钱  </p>
      <p> {{ maskFlag }} </p>
    </div>
  </template>

  Vue.component('Father',{
    template: '#father',
    data () { // 为什么要将data定义为函数？
      return {
        money: 2000,
        maskFlag: 10000000000
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    props: ['money','maskFlag']          
  })

  new Vue({
    
  }).$mount('#app')

问题：

props
1. 在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
```
<Son :money = "money"/>
```
2. 在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以是一个数组
```
Vue.component('Son',{
          template: '#son',
          props: ['money']
        })
```
3. 在子组件模板中，接收到的属性可以像全局变量一样直接使用
  <p> 父亲给了我 {{ money }} 钱 </p>
props接收的money 和子组件上绑定的自定义属性money是不是同一个？
是同一个
个人习惯：一般都是自定义属性会和数据写成一致
自定义属性的书写
money ----> money
mask-flag ----> maskFlag
为什么data要定义为一个函数？
1. 组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据
2. 也就是说这个数据应该有独立的作用域，也就是一个独立的适用范围，这个范围就是这个组件内
3. js最大特征是：函数式编程，而函数恰好提供了独立作用域
为什么data要有返回值？返回值还是一个对象?
1. 因为Vue是通过observer来观察data选项的，所以必须要有返回值
2. 因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置
app实例的手动挂载

  new Vue({
    
  }).$mount('#app')

2.2子父组件通信

案例：

  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里father组件 </h3>
      <p> 儿子给了我   {{ money }} </p>
      <Son @give = "getHongbao"/>
    </div>
  </template>
  <template id="son">
    <div>
      <button @click = "giveFather"> give </button>
      <h3> 这里是son组件 </h3>
    </div>
  </template>

  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 0
      }
    },
    methods: {
      getHongbao ( val ) {
        console.log( 1 )
        this.money = val
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        hongbao: 500
      }
    },
    methods: {
      giveFather () {
        //如何进行父组件给子组件的自定义事件触发
        this.$emit('give',this.hongbao)
      }
    }
  })
  

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

/* 
    自定义事件
        1. 自定义的   通过  $on  定义    $emit触发
        2. 通过绑定在组件身上定义，通过 $emit触发


    子父通信流程
        1. 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上

            <Son @aa = "fn"/>       //这边要注意： fn是要在父组件配置项methods中定义

        2. 在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件

          Vue.component('Son',{
            template: '#son',
            data () {
              return {
                hongbao: 500
              }
            },
            methods: {
              giveFather () {
                //如何进行父组件给子组件的自定义事件触发
                this.$emit('give',this.hongbao)
              }
            }
          })

        3. 将子组件定义的事件处理程序  giveFather,绑定在子组件的按钮身上
           <template id="son">
              <div>
                <button @click = "giveFather"> give </button>
                <h3> 这里是son组件 </h3>
              </div>
            </template>
  
   */

2.3自定义事件

自定义的通过 $on 定义 $emit触发

   var vm = new Vue({
   el: '#app'
   })

   // 自定义事件的定义（ 发布 ）

   // vm.$on(自定义事件的名称，自定义事件的事件处理程序)

   vm.$on( 'aa', function () {
   console.log( 'aa' )
   })

   //自定义事件的触发 （ 订阅 ）

   // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)

   vm.$emit( 'aa' )

通过绑定在组件身上定义，通过 $emit触发

<Son @aa = "fn"/>

使用：子父通信

2.4 组件的根元素必须有且仅有一个

2.5 非常规通信

案例：

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3>这里是father组件</h3>
      <p> 这里是父组件的n； {{ n }} </p>
      <Son :add = "add"></Son>

    </div>
  </template>

  <template id="son">
    <div>
      <h3>这里是son组件</h3>
      <button @click = "add( money )"> give </button>
    </div>
  </template>
</body>
<script>
  /* 
    业务： 我要进行子父组件通信
      理解： 使用自定义事件实现

    实现： 
      父组件将一个方法通过属性绑定的形式给了子组件，子组件先是通过props接收这个方法，再执行这个方法

      这个方法不推荐大家使用


      why?

      因为我们之前讲过，MVVM框架是单向数据流，但是上面的方法违背了单项数据流
   */
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        n: 0
      }
    },
    methods: {
      add ( val ) {
        this.n =  val
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 1000
      }
    },
    props: ['add']
  })
  new Vue({
    el: '#app'
  })
</script>

案例：

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3>这里是father组件</h3>
      <p> father: 小金库: {{ xiaojinku.money }} </p>
      <Son :xiaojinku = "xiaojinku"></Son>

    </div>
  </template>

  <template id="son">
    <div>
      <h3>这里是son组件</h3>
      <button> give </button>
      <input type="text" v-model = "xiaojinku.money">
      <p> son  小金库： {{ xiaojinku.money }} </p>
    </div>
  </template>
</body>
<script>
  /* 
      父组件传递一个 对象类型  给 子组件
      子组件通过 props 接收

      就会发现： 子组件修改这个数据的时候，父组件的数据也随之改变了  ？

      why?

      因为父组件给子组件的是对象的引用地址

      这种方法我们不推荐使用  ， 违背了单向数据流

    
   */
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        xiaojinku: {
          money: 1000
        }
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    props: ['xiaojinku']
  })
  new Vue({
    el: '#app'
  })
</script>

3.动态组件

什么是动态组件？
可以改变的组件
使用
通过 Vue 提供了一个 component + is 属性
动态组件指的就是 component这个组件

案例

<div id="app">
   <button @click = "change"> 切换 </button>
   <keep-alive include="">
      <component :is = "type"></component>
   </keep-alive>
</div>

  Vue.component('Aa',{
      template: '<div> Aa </div>'
   })

   Vue.component('Bb',{
      template: '<div> Bb </div>'
   })

   new Vue({
      data: {
         type: 'Aa'
      },
      methods: {
         change () {
         this.type = (this.type === 'Aa'?'Bb':'Aa')
         }
      }
   }).$mount('#app')

Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存，这样当我们切换组件时，就可以大大提高使用效率
keep-alive也可以以属性的形式呈现，但是我们如果搭配component的话，建议使用组件的形式

weixin_45213847

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件通信

组件通信1. 为什么要进行组件通信？组件通信可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起的时，这些组件相互之间要建立联系，这个联系我们就称之为通信。2.组件通信的方式有以下几种（重点）父子组件通信使用props来实现子父组件通信自定义事件非父子组件通信ref链bus事件总线多组件状态共享（多个组件共用同一个数据）2.1父子组件通信 <div...
复制链接

扫一扫