1、在父组件中导入并加载子组件
导入:import AddBook from './AddBook.vue'
export default {
data() {
return {}
},
components:{
AddBook, // 加载
},
methods: {
getChildResult: function(data) { // 这个data就是子组件返回的值
this.requestBookList(null);
this.dialogFormVisible = !data;
}
},
....
}
2、父组件引用子组件并绑定参数ISBN
<template>
<add-book :ISBN.sync="isbn" v-on:refreshPage="getChildResult"></add-book>
<!-- :ISBN.sync="isbn"是绑定父组件传给子组件的参数, v-on:refreshPage="getChildResult"是绑定子组件返回给父组件的参数 -->
</template>
3、子组件声明并监听参数ISBN
export default {
props: ['ISBN'],// 父组件传递的参数
data() {
return {}
},
watch: {
/* 子组件获取父组件的参数ISBN时,如果没有监听,只能实现一次赋值,immediate是关键点,没有这个参数没有及时更新*/
ISBN: {
immediate: true,
handler(val){
if(val != null) {
this.book.isbn = val; // va就是父组件ISBN改变后的值,将其赋值给子组件的相关参数即可
this.requestBook({}); // 不用理会,个人方法而已
}
}
}
},
methods: {
returnParamToP: function(val) {
this.$emit("refreshPage", val); // 利用$emit设置参数名称,并赋给相应的值
// 在父组件绑定该参数名称,如上 v-on:refreshPage="getChildResult" ,然后在自定义方法getChildResult中按自己需求对参数数据处理
},
},
....
}