VUE中的父子组件通信
VUE项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。而在父组件中是不能直接调用子组件中的变量值的。下面详细说一下，父子组件之间怎么传值。
先说一下父组件引入子组件的方法。
1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系
{
path: '/father',
name: 'father',
component: father,
children: [
{
path: 'son',
name: 'son',
component: son
}
] }
2、组件传值-父组件向子组件传值
第一步：父组件 在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用
父组件：father.vue
<template>
<div>
<h1>父组件</h1>
<router-view v-bind:fData="data1" :fMessage="data2"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
data1: '父组件数据data1',
data2: '父组件数据data2',
};
}
}
</script>
第二步：把父组件传递过来的数据， 在 props数组 中定义一下
组件中的 所有props 中的数据，都是通过父组件传递给子组件的
props 中的数据都是只读的，无法重新赋值
第三步：在该子组件中使用props数组 中定义好的数据
子组件：son.vue
<template>
<div>
<h1>子组件</h1>
<p>下面是父组件传过来的数据</p>
<p>第一个数据：{{fData}}</p>
<p>第二个数据：{{fMessage}}</p>
</div>
</template>
<script>
export default {
props: ['fData', 'fMessage'],
data () {
return {
};
}
}
</script>
3、组件传值-父组件把方法传递给子组件
第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件
<template>
<div>
<h1>父组件</h1>
<router-view @show="showFather"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
};
},
methods: {
showFather (a, b) {
console.log('触发了父组件的方法' + '======' + a + '======' + b);
}
}
}
</script>
第二步：在子组件中定义一个方法，在方法中，利用 $emit 触发 父组件传递过来的，挂载在当前实例上的事件，还可以传递参数
第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了
子组件：son.vue
<template>
<div>
<h1>子组件</h1>
<Button type="primary" @click="sonClick">触发父组件方法</Button>
</div>
</template>
<script>
export default {
data () {
return {
};
},
methods: {
sonClick () {
this.$emit('show', 111, 222);
}
}
}
</script>
4、组件传值-子组件通过事件调用向父组件传值
在子组件中，利用 $emit 触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件
父组件：father.vue
<template>
<div>
<h1>父组件</h1>
<router-view @show="showFather"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
fromSon1: '',
fromSon2: ''
};
},
methods: {
showFather (a, b) {
this.fromSon1 = a;
this.fromSon2 = b;
console.log('触发了父组件的方法' + '======' + a + '======' + b);
}
}
}
</script>
子组件：son.vue
<template>
<div>
<h1>子组件</h1>
<Button type="primary" @click="sonClick">触发父组件方法</Button>
</div>
</template>
<script>
export default {
props: ['fData', 'fMessage'],
data () {
return {
sonMessage: '子组件数据sonMessage',
sonData: '子组件数据sonData'
};
},
methods: {
sonClick () {
this.$emit('show', this.sonMessage, this.sonData);
}
}
}
</script>
5、父子组件之间相互传值
父组件：father.vue
<template>
<div>
<h1>父组件</h1>
<Button type="primary" @click="getData">获取数据</Button>
<router-view v-bind:fData="data1" :fMessage="data2" @show="showFather"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
data1: '父组件数据data1',
data2: '父组件数据data2',
fromSon1: '',
fromSon2: ''
};
},
methods: {
showFather (a, b) {
this.fromSon1 = a;
this.fromSon2 = b;
console.log('触发了父组件的方法' + '======' + a + '======' + b);
},
getData () {
console.log(this.fromSon1);
console.log(this.fromSon2);
}
}
}
</script>
子组件：son.vue
<template>
<div>
<h1>子组件</h1>
<p>下面是父组件传过来的数据</p>
<p>第一个数据：{{fData}}</p>
<p>第二个数据：{{fMessage}}</p>
<Button type="primary" @click="sonClick">触发父组件方法</Button>
</div>
</template>
<script>
export default {
props: ['fData', 'fMessage'],
data () {
return {
sonMessage: '子组件数据sonMessage',
sonData: '子组件数据sonData'
};
},
methods: {
sonClick () {
this.$emit('show', this.sonMessage, this.sonData);
}
}
}
</script>
