关于vue.js:vue组件传值

父组件传递自定义事件给子组件, 子组件显示调用的两种形式

  1. 父组件应用 v-bind(:属性传递)
    父组件

    <child
      :mockParent="handleParentEvet"
    ></child>

    子组件需接管props

    props:{
      mockParent:{
     type: Function
      }
    },
    methods:{
      handle(){
     this.mockParent('param from child')
     // 不能应用 this.$emit('mockParent','sssss')
      }
    }
  2. 父组件应用 v-on/@(事件传递),子组件调用时应用边界状况
    父组件

    <child
      @test="parentTest"
      @update="parentUpdate"
    ></child>

    子组件中无需接管props

    methods:{
      handle(){
     this.$listeners.test('param from child test') // OK
     this.$listeners.update('param from child update') // OK
     this.$emit('update','param from child update') // OK
      }
    }

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理