VUE-组件传值

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)  //传值给父级
    },
  }
}