Vue父子组件通信-优快云博客

本文链接：https://blog.youkuaiyun.com/w_wangewanbuhuidege/article/details/114717189

父传子
- 父传子的时候通过属性传递
- 子要声明props:[‘属性名’] 来接收
- 收到就是自己的了，随便你用
  - 在template中直接用
  - 在js中 this.属性名用
子传父
- 子组件里通过$emit(‘自定义事件名’,变量1，变量2)触发
- 父组件@自定义事件名=‘事件名’监听
- 子组件方法里 this.$emit(‘sendfather’,val1,val2)触发自定义事件
- 父组件里 <child @sendfather=‘mymethods’>

<!DOCTYPE html
<html>
<head>
	<title>父子组件的通信</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		/* 创建组件的第一种方式第一步：局部声明 */
		//子组件定义好了props直接用		
		var Child_dl={
			template:`
				<div>
				我是子组件======={{parent_to_child_dl}}
				<br>
				<button @click='sendparent_dl'>我要反馈东西给父亲</button>
				</div>
			`,
			props:['parent_to_child_dl'],
			methods:{
				sendparent_dl(){
					this.$emit('child_to_parent_dl','这是儿子组件给你的参数')
				}
			}

		}
		/* 创建组件的第一种方式第一步：局部声明 */
		//父组件通过属性sendchild传递了数据给子组件
		var Parent_dl={
			template:`
				<div>
				我是父组件======={{ msg_dl }}
				<child_dl parent_to_child_dl='父亲给你的' @child_to_parent_dl='acceptmethod_dl'></child_dl>

				</div>
			`,
			/* 创建组件的第一种方式第二步：注册组件 父组件进行子组件的注册*/
			components:{
				Child_dl
			},
			data(){
				return {
					msg_dl:''
				}
			},
			methods:{
				acceptmethod_dl(val_dl_01){
						this.msg_dl=val_dl_01
				}
			}
		}
		
		new Vue({
			el:'#app',
			/* 创建组件的第一种方式第二步：注册组件 */
			components:{
				Parent_dl
			},
			
			template:`
				<div>
					<parent_dl></parent_dl>
				</div>
			`,
			data(){
				return {

				}
			}
		})
	</script>
</body>
</html>