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属性的值')
}
}
