1.父组件传递给子组件
父子组件之间的联系就是父组件里有子组件的容器,所以要在这个容器上下功夫
<template>
<div class="hello">
<h1>hello</h1>
<router-view :a="name" :b="msg"></router-view>
<!-- 给这个容器,也就是子组件绑定自定义属性,值为要传递的数值 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'hello',
name:'hellos'
}
}
}
</script>
父组件里传递要在子组件里接收,通过属性传值也要通过属性接收,也就是props
<template><!-- 组件 -->
<div> <!-- 只能有一个否则将会报错 -->
<h1>main</h1>
<p>{{a}}->{{b}}</p>
</div>
</template>
<script>
export default { //将文件暴露出去,方便接收配置
name:'Main',
props:['a','b'], //这个a,b与父组件的属性对应
};
</script>
在浏览器里运行就是这样
进入到子组件
2.子组件传递给父组件
子传父主要是利用$emit 底层 继承EventEmitter类原型的emit方法来进行传值的
子组件也就是那个容器标签绑定自定义事件,子组件内部通过 $emit 进行数据推送,父组件内部通过自定义事件调用的函数
参数接收传递的数据。
子组件传值
<script>
export default { //将文件暴露出去,方便接收配置
name:'Main',
props:['a','b'],
data(){
return{
child:'child'
}
},
mounted(){ //挂载好之后开始传值
this.$emit('toparent',this.child);//传递数据, 名字要与父组件自定义的事件名相同
}
};
</script>
父组件里接收
<p>子组件数据{{child}}</p>
<router-view :a="name" :b="msg" @toparent="getstate"></router-view>
<!--自定义的事件,通过传参来接收子组件的数据-->
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'hello',
name:'hellos',
child:'' //给子组件传递过来的数据留一个位置
}
},
methods:{
getstate(data){
this.child = data; //这个参数就是子组件传递过来的值
}
}
}
</script>
此时子组件还没有挂载,因此没有数值传递过来,点击点入main界面子组件开始挂载
子组件挂载好之后,传递数值,父组件进行接收并展示