欢迎光临
我们一直在努力

Vue父子组件传值

文章目录

父组件向子组件传值

思路:父组件引入子组件,并在子组件标签上使用v-bind绑定值,子组件通过props进行接收。

// 父组件
<template>
  <div>
    <son :num="1" str:"1"></son> //:跟的时表达式 后面的是str
  </div>
</template>

// 子组件
data(){
  name:"son",
  props:["num","str"]
}

子组件向父组件传值

思路:在子组件中创建事件,通过$emit触发自定义事件并传值,该自定义事件绑定在父组件引入时的子组件标签上,自定义事件触发父组件中定义的函数,这个函数的参数就是子组件传过来的值。

<template>
  <son @child-event="parentEvent"></son>
// 3 子组件自定义事件被触发,调用函数parentEvent
</temolate>

methods:{
    parentEvent(data){  //data为子组件传入的值
      console.log(data);
// 4 parentEvent中的参数即是子组件传入的值
    }
}

<template>
  <button @click="emitToParentEvent">按钮</button>
</temolate>
// 1 子组件被点击,触发事件emitToParentEvent
methods:{
// 2 emitToParentEvent内触发child-event自定义事件,并传入参数
  emitToParentEvent(){
    this.$emit('child-event','子组件传入的内容')
  }
}

备注:

在组件上添加的事件是自定义事件,不是Vue提供的事件。如果想在自定义组件上添加原生事件可以通过修饰符.native

<son @click.native = "handleClick"></son >
赞(0) 打赏
未经允许不得转载:散人研 » Vue父子组件传值
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

3 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏