创建三个vue组件——index.vue
(父组件),son1.vue
(子组件),son2.vue
(子组件)
在router文件设置好父组件路径(子组件不用设置路由);
父子组件之间的页面转换是不通过路由的
父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。
this.$parent
此方式并不属于数据的传递而是一种主动的查找。父组件并没有主动的传递数据给子组件,而是子组件通过与父组件的关联关系,获取了父组件的数据。
该方法虽然能实现获取父组件中的数据但是不推荐这种方式,因为vue提倡单向数据流,只有父组件交给子组件的数据子组件才有使用的权限,不允许子组件私自获取父组件的数据进行使用。在父与子的关系中子应当是处于一种被动关系。
父组件内容:
<template>
<div class="index">
<div v-if='group_type==1'>
<span>我是父组件</span>
<button @click='group_type=4'>去大儿子家</button>
<button @click='group_type=5'>去小儿子家</button>
</div>
<son1 v-if="group_type==4" :goodsId='goods_id' @group_type="get_type"></son1>
<son2 v-if="group_type==5" :type='goodsName' @group_type="get_type"></son2>
</div>
</template>
<script>
import son1 from './son1';
import son2 from './son2';
export default{
data() {
return {
group_type:1,
goods_id:'男鹅,3岁',
goodsName:'浙东大白鹅',
}
},
//引入子组件
components: {
son1,
son2,
},
methods: {
//子组件返回父组件后执行的函数;
get_type(i){
this.group_type = i;
}
},
}
</script>
<style>
button{
padding: 10px 15px;
background: rgb(109, 177, 233);
color: #fff;
font-size: 14px;
border: solid 1px;
border-radius:6px;
}
</style>
子组件son1的内容:
<template>
<div class="son1">
<span>我是大儿子----{{name}}</span>
<button @click='_back()'>返回</button>
</div>
</template>
<script>
export default{
name :'son1',
data() {
return {
name:''
}
},
// props用来接收父组件传过来的属性值
props: {
goodsId: String //参数类型可以是String,Number,Boolean,Object, Array ,Function
},
created() {
this.name = this.goodsId;
console.log(this.$parent); //获取父组件所有的属性方法(不推荐);
},
methods: {
_back(){
//子组件使用$emit发出自定义事件
this.$emit("group_type", 1);
}
}
}
</script>
子组件son2的内容:
<template>
<div class="son2">
<span>我是小儿子----{{name}}</span>
<button @click='_back()'>返回</button>
</div>
</template>
<script>
export default{
name :'son2',
data() {
return {
name:'',
}
},
props: {
type: String
},
created() {
this.name = this.type;
},
methods: {
_back(){
this.$emit("group_type", 1);
}
}
}
</script>