【Vue3从零开始-第三章】3-5 父子组件之间事件通信

2022-09-26 2321

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第三章】3-5 父子组件之间事件通信

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇的文章中，我们了解了vue组件Non-Props属性，今天我们继续深入了解一下vue组件中的父子组件之间通信。

回顾

在前面的几篇文章中，我们知道组件之间传值的时候，可以通过父组件调用子组件标签，然后在子组件标签上用动态传参的方法传递给子组件，但是子组件没办法去修改父组件的值，因为子组件接收到的值是只读的。

<script>
  const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    template: `
      <div>
        <counter :count="count" />
      </div>
    `
  });
  app.component('counter', {
    props: ['count'],
    methods: {
      handleClick(){
        this.count += 1
      }
    },
    template: `
      <div @click="handleClick">{{count}}</div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码

[Vue warn]: Attempting to mutate prop "count". Props are readonly.

今天的文章中我们将详细讲解一下父子组件如何通过事件方法进行通信。

$emit

$emit：子组件触发父组件事件的方法当子组件中无法完成的一些事件操作时，可

以通过$emit方法通知父组件去完成。下面我们就来改造一下上面的代码。

handleClick(){
    this.$emit('addOne')
}
复制代码

this.$emit()：这个方法时一个固定的写法，也是vue提供的事件，意思就是我要向外部触发一个事件，传入事件名称即可。

既然子组件要通知父组件触发一个事件，那么父组件就得接收到子组件传递过来的事件。

const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    methods: {
      handleAddOne(){
        this.count += 1
      }
    },
    template: `
      <div>
        <counter :count="count" @add-one="handleAddOne" />
      </div>
    `
  });
复制代码

父组件中可以在子组件标签上通过v-on指令（简写@）接收子组件触发的事件。

子组件触发事件是采用驼峰形式去写方法名，父组件接收的时候需要改成-接收方法名。

父组件接收到子组件传递过来的方法之后，就可以触发父组件内部方法了

$BOJL`I5}%N6H{QHS_V001IR.png$

传参

通过上面的代码我们看到父子组件之间通过事件已经可以进行通信了，但是我们只是触发了事件而已，当我们需要在子组件里面传递参数要咋整呢？

子组件触发的事件中，调用$emit方法时，除了定义方法名之外，后面还可以直接携带参数。

handleClick(){
    this.$emit('add', 2)
}
复制代码

父组件触发的事件中，可以直接在方法中接收子组件传递过来的参数。

const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    methods: {
      handleAddOne(param){
        this.count += param
      }
    },
    template: `
      <div>
        <counter :count="count" @add="handleAddOne" />
      </div>
    `
});
复制代码

B11N%AY4UGVH_LNK0J`(D6H.png

$emit方法后面携带的参数可以是多个。

// 子组件中的事件
handleClick(){
    this.$emit('add', 2, 3)
}
// 父组件中的事件
handleAddOne(param1, param2){
    this.count += param2
}
复制代码

B11N%AY4UGVH_LNK0J`(D6H.png

$emit方法后面携带的参数也可以直接进行计算。

// 子组件中的事件
handleClick(){
    this.$emit('add', this.count + 4)
}
// 父组件中的事件
handleAddOne(count){
    this.count = count
}
复制代码

(8~(~0IXOR7T6G06@F%]SEE.png

emits

emits：校验对外触发的方法名

app.component('counter', {
    props: ['count'],
    emits: ['add'],
    methods: {
      handleClick(){
        this.$emit('add', this.count + 4)
      }
    },
    template: `
      <div @click="handleClick">{{count}}</div>
    `
})
复制代码

在子组件中可以定义emits来校验$emit中的方法名，如果一致则可以触发成功。

emits: ['minus'],
复制代码

如果我们将子组件中的emits定义的值和$emit中的方法名不一致，则会在浏览器控制台中进行提示。

[Vue warn]: Component emitted event "add" but it is neither declared in the

emits option nor as an "onAdd" prop.

除了在emits中使用数组定义方法名之外，还可以通过对象的方式进行校验。

emits: {
    add: (count) => {
        if(count < 0){
          return true
        }
        return false
    }
},
复制代码

在emits对象中可以监听$emit中的方法名，触发一个事件的时候可以获取到$emit中传递的参数值。

当监听对象中校验不通过时，也会在浏览器控制台中进行提示。

[Vue warn]: Invalid event arguments: event validation failed for event "add".

v-model

在以前的文章中，我们知道v-model指令是做双向数据绑定的，其实它也可以做父子组件通信的指令。

<script>
  const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    template: `
      <div>
        <counter v-model="count" />
      </div>
    `
  });
  app.component('counter', {
    props: ['modelValue'],
    methods: {
      handleClick(){
        this.$emit('update:modelValue', this.modelValue + 5)
      }
    },
    template: `
      <div @click="handleClick">{{modelValue}}</div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码

父组件中调用子组件标签时，可以直接使用v-model指令进行传值。

子组件中通过props接收父组件中的参数modelValue。

$emit方法中，直接通过update:modelValue的事件就可以对父组件的值进行修改了。

(8~(~0IXOR7T6G06@F%]SEE.png

modelValue是默认写法，不可以随意更改。

但是有些时候，我们需要自定义父组件传递给子组件的参数名称要怎么做呢？

<script>
  const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    template: `
      <div>
        <counter v-model:count="count" />
      </div>
    `
  });
  app.component('counter', {
    props: ['count'],
    methods: {
      handleClick(){
        this.$emit('update:count', this.count + 6)
      }
    },
    template: `
      <div @click="handleClick">{{count}}</div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码

直接在父组件中的子组件标签上使用v-model:xxx的方式进行自定义名称即可。

子组件就接收自定义的名称进行渲染和操作。

(8~(~0IXOR7T6G06@F%]SEE.png

总结

本篇文章主要讲解了vue中的父子组件之间通过事件通信的方法：$emit、v-model，也讲解了在进行通信时可以传递参数，也可以对传递的方法和参数进行校验。

【Vue3从零开始-第三章】3-5 父子组件之间事件通信

前言

回顾

$emit

传参

emits

v-model

总结

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

【Vue3从零开始-第三章】3-5 父子组件之间事件通信

前言

回顾

$emit

传参

emits

v-model

总结

热门文章

最新文章

相关课程

相关电子书