Vue this.$emit 子组件向父组件传递

子组件向父组件传递数值

在父组件进行调用子组件需要使用 v-model 进行绑定接收数据的变量,示例代码如下

理解为自定义组件命名为 swiper 绑定父组件在data里面声明命名为 currIndex 变量

<swiper v-model="currIndex"></swiper>

子组件若想修改 currIndex 变量内容需要使用 this.$emit('index',数值内容) 示例代码如下

理解为修改 currIndex 为数值 1

 this.$emit('input', 1);

子组件接收数据

子组件若向接收父组件使用 v-model 标签掉落的数据必须使用命名为 value 的变量名称才能接收到数据! 

type  为接收的数据类型为什么

default 为接收数据的默认值

若接收的为数字类型数据 则将 type 修改为Number default 修改为 0或其他数字

props: {
   value: {
      type: Boolean,
      default: false
   }
},

 

子组件向父组件调用函数

在父组件进行调用子组件需要使用 v-on 进行绑定接收数据的变量,示例代码如下

理解为自定义组件命名为 swiper 绑定父组件在methods里面声明命名为 myfun 函数

<swiper v-on:myFun="myFun"></swiper>

子组件若想调用父组件的 myFun 函数需要使用 this.$emit('函数名称',参数,..) 示例代码如下

理解为调用 myFun 并传递参数 1

 this.$emit('myFun', 1);