父子组件之间传值

一：在父组件（比如在搜索知识条页面中包含子组件（最热搜索，搜索历史））
`

  const Search={
name:‘Search‘,
template:‘(用反引号)
	.
	.
	<div @click="back">点击退回</div>
	<input  @click=goSearch...input搜索框.....>
	<div @click="selectDept">部门的选择
		<div @click="SureSearchDept">确定选择</div>
		<div>重置</div>
	</div>
	<div @click="selectScope">搜索范围的选择(标题,正文,附件,问答)
		<div @click="SureSearchScope">确定选择</div>
		<div>重置</div>
	</div>
	<!--randomFather是父组件中的值,在子组件中用props[‘random‘]进行接收,
		且不需要在子组件中的data数据中进行定义,用这种方式就相当于是在data中定义过了						
	--->
	<!--goSearch是父组件中的方法,并且可以接收子组件传递来的参数,在goSearch中直接加参数即可:goSearch(参数)
		fromSon是子组件传递来的方法this.$emit(‘fromSon‘,param1)
		注意子组件传递的方法要和父组件中定义的属性方法要一致
	-->
	<search-main  v-if="shifouShow"   :random="randomFather" :fromSon="goSearch" ></search-main>
	.
	.
‘(用反引号),
/**
 * 此页面的逻辑为：
 * 1.进入到搜索页面，要显示历史搜索关键词和最热关键词，此时shifouShow为true，开始加载子组件searchMain
 * 2.在子组件中created方法中可以获取到历史搜索关键词和最热关键词，
 *    2.1如果点击关键词，子组件会将关键词传递给父组件中，
 * 		  在父组件中进行搜索关键词，获取到要搜索的知识条，并将子组件关闭shifouShow改为false
 * 3.直接在搜索框中搜索关键词：将搜索条件（搜索范围，搜索部门，英文拼音）+关键词一并传给方法，
 * 	 开始搜索，并将子组件关闭shifouShow改为false
 * */
data:{
	randomFather:‘‘,
	mainkey:‘‘,
	depts:[],
	scopes:[],
	shifouShow:true
},
methods:{
	back:function(){
		if(!this.shifouShow){//在搜索结果页点击返回
			this.shifouShow=true;//此时最热关键词和历史关键词就会将搜索结果页进行覆盖，相当于是页面退回了
			this.randomFather=Math.random().toString();//此时点击退回按钮，相当于退出搜索结果页。
		}else{     //在最热关键词历史关键词页，点击返回
			this.$router.push(path:‘/‘);//改变路由，去往知识库首页
		}
	},
	selectDept:function(){
		var vm = this;
		.
		.(选择部门的逻辑方法)
		.
		.
		depts=选择的多个部门
	},
	SureSearchDept:function(
		//只要此值改变，在子组件中用whatch进行监听，就可以执行相应的方法
		vm.randomFather = Math.random().toString();
		this.onSearch()
	),
	selectScope:function(){
		var vm = this;
		.
		.(选择搜索范围的逻辑方法)
		.
		.
		scopes=选择的多个搜索范围
	},
	SureSearchScope:function(){
		vm.randomFather = Math.random().toString();
		this.onSearch()
	},
	goSearch:function(fromSonKey){
		var  vm = this;
		vm.mainkey = fromSonKey;
		vm.onSearch();
	},
	onSearch:function(){
		//写search的方法逻辑,请求到搜索的结果,并将子组件历史搜索关闭
		this.shifouShow=false;//此时子组件searchmain不会再进行显示
	}	
}
}

`
2.子组件中

`

  Vue.component(‘SearchMain‘,
template:‘(用反引号)
	.
	.
	.
	<div>热门关键词
		<div v-for="item in hotKeys" @click="goFatherSearch(item.key)">关键词1</div>
	</div>
	.
	.
	<div>历史搜索
		<div v-for="item in hisKeys" @click="goFatherSearch(item.key)">历史搜索关键词1</div>
	</div>
	.
	.
	.‘（用反引号）
     ,
props:[‘random‘],//从父组件中传递来的参数，在data中不需要再进行定义
whatch:{
	random(n,o){//
		this.history();
		this.hotkey();
	}
},
created(){
	this.history();//获取历史搜索关键词
	this.hotkey();//获取最热关键词
},
data:{
	key:‘‘,
	hiskeys:[],//历史关键词
	hotKeys:[]//热门关键词
},
methods:{
	history(){
		//书写获取历史关键词搜索的逻辑
		this.hisKeys=获取到的历史关键词;
	},
	hotkey(){
		//书写获取最热关键词的逻辑
		this.hotKeys=获取到的最热关键词;
	},
	goFatherSearch(param){//param：点击的关键词，将此关键词传递给父组件
		this.$emit(‘fromSon‘,param);//formSon:要和父组件中定义的属性方法名称相同，param：是传递的参数
		
	}
}
  )

`

父子组件之间传值

原文：https://www.cnblogs.com/songkaikai/p/14153717.html