Vue.js组件间调用及传值 2020最新更新

Vue.js中，对于父子组件、平级组件间的事件触发、传值等。

调用

父组件

<button @click="trigger_child">点击触发子组件方法</button>
<Child ref="my_child">子组件</child>

methods: {
    trigger_child() {
        const param = '需要传递到子组件相应方法的参数内容'
        this.$refs.my_child.child_method(param)
    }
}

子组件

methods: {
    child_method(event) {
        console.log(event)
    }
}

子组件调用父组件

子组件

触发父组件submit事件，并传递content作为参数

this.$emit('submit', content)

父组件

子组件触发父组件submit事件时，调用submit_form方法，并声明传入的参数名为item

<Child :value="item" @submit="submit_form" />

methods: {
    submit_form(item) {
        console.log(item)
    }
}

传值

原理
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

父组件

<custom-input v-model="任何data中属性名"></custom-input>

子组件

通过props中名为value的属性接收，通过触发父组件的input事件来传递值

props: {
    // 必须通过名称为“value”的键获取
    value: {
        type: String // 传入的属性值的实际类型
        default: ''
    }
}

template中通过DOM的input事件触发

<input
  v-bind:value="value"
  v-on:input="$emit('input', $event.target.value)"
>

scripts中通过代码显式调用

methods: {
    method_name() {
        this.$emit('input', '任意想赋给父组件相应data属性的值')
    }
}