组件通信

最新推荐文章于 2022-09-02 09:00:00 发布

csdnzlcheng

最新推荐文章于 2022-09-02 09:00:00 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/csdnzlcheng/article/details/93720757

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件通信

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

组件通信的方式有以下几种（王者级）

父子组件通信：使用props来实现
1. 在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
```
   <Son :money = "money"/>
```
1. 在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以是一个数组
```
   Vue.component('Son',{
      template: '#son',
      props: ['money']
   })
```
1. 在子组件模板中，接收到的属性可以像全局变量一样直接使用
```
   <p> 父亲给了我  {{ money }}  钱  </p> 
```

子父组件通信
自定义事件

在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上
- <Son @aa = “fn”/> //这边要注意： fn是要在父组件配置项methods中定义
在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件

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

将子组件定义的事件处理程序 giveFather,绑定在子组件的按钮身上

 <template id="son">
   <div>
      <button @click = "giveFather"> give </button>
      <h3> 这里是son组件 </h3>
   </div>
</template>

非父子组件通信

ref链: 可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了 $attrs

bus事件总线

在其中一个组件的挂载钩子函数上做事件的声明

Vue.component('Sma',{
   template: '#small',
   data () {
     return {
       flag: false
     }
   },
   mounted () { //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
     // mounted这个钩子函数的触发条件是组件创建时会自动触发
     // 事件的声明
     var _this = this 
     bus.$on( 'aa',function () {
       _this.flag = true
       console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
     })
   }
 })

在另一个组件中通过 bus.$emit(‘aa’)来触发这个自定义事件

多组件状态共享（多个组件共用同一个数据）大知识点（ vuex ）
vuex

接下来的几种方式是非常规手段，是你不得已才使用的，砸门是不推荐的

问题：为什么data要定义为一个函数？

组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据
也就是说这个数据应该有独立作用域，也就是有一个独立的使用范围，这个范围就是这个组件内
js的最大特征是：函数式编程，而函数恰好提供了独立作用域

问题：为什么data要有返回值？返回值还是一个对象？

因为Vue是通过observer来观察data选项的，所有必须要有返回值
因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置

app实例的手动挂载

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

自定义事件

自定义的通过 $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”/>

使用：子父通信

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

动态组件

什么是动态组件？
可以改变的组件
使用
通过 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的话，建议使用组件的形式

slot 插槽

作用/概念: 预先将将来要使用的内容进行保留
具名插槽：给slot起个名字

注意：以上两种形式在 vue2.6以上被废弃
为什么要用 v-slot指令来代替呢？
- 经具名插槽和作用域插槽进行统一
- 要将这两个属性带有 vue的标志，并且符合vue两个最大的特性之一：指令的概念

csdnzlcheng

关注

1
点赞
踩
2

收藏

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

组件通信为什么要进行组件通信？组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信组件通信的方式有以下几种（王者级）父子组件通信：使用props来实现在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上 <Son :money = "money"/>在子组件的配...
复制链接

扫一扫