vue 组件间的传值

最新推荐文章于 2022-09-12 16:18:05 发布

zxf_CN

最新推荐文章于 2022-09-12 16:18:05 发布

阅读量155

点赞数

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

本文链接：https://blog.csdn.net/zxf_CN/article/details/109322243

版权

利用子组件中的 $meit 属性，注册事件，然后在父组件中，使用 $meit 定义的方法，在父组件中绑定事件；我们触发子组件的绑定 $meit 事件，就会触发父组件中的数据；

如果，再利用 $meit 的第二个属性，传递子组件的参数，过去父组件中；

$emit 语法：

$emit('绑定的事件',传递的数据)

1，在 子组件 中使用 $meit () 来传递给父组件；

<button @click="$emit('childFn', 123)">子组件按钮</button>

如果，在函数中调用 $e m i t ，要使用 t h i s .$ emit

methods: {
   
    xxx: {
   
      this.$emit('childFn', 123)
    }
}

2，在父组件中的子组件占位标签上，使用子组件中 $emit 定义的 ‘方法’，来调用事件（他们类似 click 等方法；

<router-view @childFn="fn"/>

调用父组件中的 fn 事件；

3，在父组件中定义 fn 事件：

methods: {
   
    fn (data) {
   
      // data 就是子组件传递过来的参数；
      console.log('触发函数' + data)

关注