vue中$emit()和$on()使用

最新推荐文章于 2024-06-21 08:47:39 发布

小霖子²²²

最新推荐文章于 2024-06-21 08:47:39 发布

阅读量430

点赞数

文章标签： vue中$emit() vue中$on()使用

本文链接：https://blog.csdn.net/kuku30/article/details/93636012

版权

组件通信

为什么要进行组件通信？
组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信
组件通信的方式有以下几种（王者级）
1. 父子组件通信
  使用props来实现
2. 子父组件通信
  自定义事件
3. 非父子组件通信
  ref链: 可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了 $attrs
  bus事件总线
4. 多组件状态共享（多个组件共用同一个数据）大知识点（ vuex ）
  vuex
5. 下来的几种方式是非常规手段，是你不得已才使用的，咱门是不推荐的

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"/>
使用：子父通信

非父子组件通信

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

html结构

```html
  <div id="app">
    <input type="text" ref="text" @keyup.enter="getdata">
    <button @click="getdata">获取内容</button>
    
    <chen ref="refsenent"></chen>
    <button @click="get">获取组件内容</button>
    
</div>

```javascript
         Vue.component("chen",{
         template:`<input type="text" v-model="text">`,
         data() {
               return {
                  text:''
               }
         },
         methods: {
               gethande(data) {
                  console.log('refs',data)
               }
         },
      })

      new Vue({
         el:'#app',
         data:{
            
         },
         methods: {
               getdata() {
                  console.log(this.$refs.text.value)//原生DOM获得的就是原生DOM
               },
               get(){
                  console.log(this.$refs.refsenent.text)
                  this.$refs.refsenent.gethande("发送的信息")//自定义组件获得的是自定义组件
               }
         },
      })

bus事件总线

bus事件总线，我们是通过 $o n 来定义事件, 通过$ emit来触发事件

    流程： 
      1. 在其中一个组件的 挂载钩子函数上做事件的声明
          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这个组件
              })
            }
          })


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

## 非常规手段
 - 父组件传递一个 对象类型给子组件 子组件通过 props 接收
 
```html
         <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>

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

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

         <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>

         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'
      })

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

动态组件

什么是动态组件？
可以改变的组件
使用
通过 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两个最大的特性之一：指令的概念

2.6版本前slot例子

   <div id="app">
         <Hello>
            <header slot = 'header'> 这里是头部 </header>
            <footer slot = 'footer'> 这里是底部 </footer>
         </Hello>
   </div>

      <template id="hello">
         <div>
            <slot name = "header"></slot>
            <h3>这里是hello</h3>
            <slot name = "footer"></slot>
         </div>
      </template>

   Vue.component('Hello',{
      template: '#hello'
   })

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

2.6版本后的v-slot

<div id="app">
      <Hello>
         <template v-slot:header>
         <h1>Here might be a page title</h1>
         </template>
      
         <p>A paragraph for the main content.</p>
         <p>And another one.</p>
      
         <template v-slot:footer>
         <p>Here's some contact info</p>
         </template>
      </Hello>
  </div>
   <template id ='hello'>
      <div class="container">
         <header>
         <!-- 我们希望把页头放这里 -->
         <slot name = "header"></slot>
         </header>
         <main>
         <!-- 我们希望把主要内容放这里 -->
         </main>
         <footer>
         <!-- 我们希望把页脚放这里 -->
         <slot name = 'footer'></slot>
         </footer>
      </div>
   </template>
   Vue.component('Hello',{
      template: '#hello'
   })
   new Vue({
      el: '#app',
      data: {
         msg: '<h3> hello 1903</h3>'
      }
   })

小霖子²²²

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中$emit()和$on()使用

组件通信为什么要进行组件通信？组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信组件通信的方式有以下几种（王者级）父子组件通信使用props来实现子父组件通信自定义事件非父子组件通信ref链: 可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了 $attrsbus事件总线...
复制链接

扫一扫