应用场景：entity.vue以组件方式嵌入在main.vue中，要求1、main.vue页面中能够将参数传递给组件entity.vue中；2、组件entity.vue能够随时回写数据到main.vue中。
一、main.vue代码
<template>
<entity :m_parameter1="m_parameter1" :m_parameter2="m_parameter2" v-bind:m_parameter3="m_parameter3" v-on:parameter3changed="m_parameter3 = $event" />
</template>
<script>
import entity from "@/pages/common/entity";
export default {
name: "product_edit",
components: {
entity
},
data() {
return {
m_parameter1: '',
m_parameter2: '',
m_parameter3: ''
}
},
computed: {},
methods: {},
mounted() {},
watch:{
m_parameter3(val){
console.log('组件回传的值：' + this.m_parameter3);
}
}
};
</script>
<style scoped>
</style>
二、entity.vue代码
<template>
<q-btn @click="returnvalue" label="回传参数" />
</template>
<script>
import entity from "@/pages/common/entity";
export default {
name: "B",
props: {
m_parameter1: {
type: String,
defult: "10000"
},
m_parameter2: {
type: String,
defult: ""
},
},
data() {
return {}
},
computed: {},
methods: {
init(){
console.log('传来的第一个参数：' + this.m_parameter1);
console.log('传来的第二个参数：' + this.m_parameter2);
},
returnvalue() {
//选中操作
this.$emit('parameter3changed', '来自组件的数据');
}
},
mounted() {}
};
</script>
<style scoped>
</style>
三、代码说明
1、main.vue中定义了三个参数：m_parameter1、m_parameter2、m_parameter3，其中m_parameter1、m_parameter2为main.vue传递给entity.vue的两个参数；m_parameter3为entity.vue要传递给main.vue的参数。
2、entity.vue接受传递过来的参数方法是定义好props后，当做正常参数（this.m_parameter1）直接使用即可。
3、entity.vue要回写数据给main.vue的方法，通过this.$emit触发main.vue中定义的方法（如本示例中的parameter3changed）。
4、main.vue通过watch监控变量m_parameter3，一旦有变化就会触发相应的处理逻辑。
网友评论