1 父页面
/* v-if="showSearchOne" 可以有效销毁子组件
:resultList 父组件传值给子组件
*/
<SearchOneKey
v-if="showSearchOne"
:resultList="resultList"
@getSearch="getSearch"
ref="SearchOneKey"
/>
data() {
return {
showSearchOne: false,
resultList:[{ appTitle: "对象信息"},{ appTitle: "设备信息"}]
}
},
methods: {
//接收子组件传值
getSearch(val){
console.log(val)
},
//通过ref获取子组件的数据
getList(){
this.$nextTick(() => {
if(this.$refs.SearchOneKey){
this.$refs.SearchOneKey.list
}
})
}
}
2 子页面
<template>
<div class="search-one"></div>
</template>
export default {
props: {
//接收父组件传值
resultList: {
type: Array
},
},
data() {
return {
list:[{ name: "对象1"},{ name: "设备2"}]
}
},
methods: {
getSearch(val) {
this.$emit("getSearch", val) //传值给父级
},
}
}