1.vue子组件向父组件传值(父子组件传值)
父组件代码:
//parentFn 在父页面中处理的函数 childFn在子页面【Huati页面】需要处理的函数
<Huati @childFn="parentFn"></Huati>
<script>
import Huati from "@/components/opt/article/huati"
export default {
name: 'voi',
data() {
return {
form: {
description:''
}
};
},
methods: {
parentFn(payload) {
//负组件获取子组件的值
console.log(payload);
this.form.description = payload
},
},
created() {
},
mounted() {
},
components: {
UpLoadFile,
Huati
}
}
</script>
子页面
<template>
<div class="testCom">
<input type="text" v-model="message" />
<button @click="click">Send</button>
</div>
</template>
<script>
export default {
// ...
data() {
return {
// 默认
message: '我是来自子组件的消息'
}
},
methods: {
click() {
this.$emit('childFn', this.message); //通过childFn 将值传递给父页面
}
}
}
</script>
2.子组件向父组件传值
父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。
<!-- 父组件 -->
<template>
<div class="test">
<test-com @childFn="parentFn"></test-com>
<br/>
子组件传来的值 : {{message}}
</div>
</template>
<script>
export default {
// ...
data() {
return {
message: ''
}
},
methods: {
parentFn(payload) {
this.message = payload;
}
}
}
</script>
子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件。
<!-- 子组件 -->
<template>
<div class="testCom">
<input type="text" v-model="message" />
<button @click="click">Send</button>
</div>
</template>
<script>
export default {
// ...
data() {
return {
// 默认
message: '我是来自子组件的消息'
}
},
methods: {
click() {
this.$emit('childFn', this.message);
}
}
}
</script>