Vue组件之间的通信是使用组件中常用的部分。介绍几种常用的组件之间通信方式。
一、使用props配置项
props配置项主要应用与父组件与子组件进行通信。父组件------>子组件
使用方法:在组件标签中绑定属性或者方法。在子组件中使用props配置项来接收父组件传递过来的数据。
父组件中:
<template>
<div id="app">
<!-- 父组件给子组件传递数据,动态绑定。 -->
<!-- 子组件使用props来接收 -->
<school :name="name" :address="address" :getName="getName"></school>
</div>
</template>
<script>
import School from './components/School.vue'
export default {
name: 'App',
// 给组件起别名方便是使用
components: {
school: School,
},
data() {
return {
name: '花生吃花生',
address: '西安',
}
},
methods: {
// 子组件给父组件传递数据可以通过函数的参数来传递。
getName() {
this.address = '南京'
},
}
}
</script>
<style></style>
可以看到在组件标签中绑定了父组件的name和address属性以及getName方法。
子组件中使用props配置项来接收。其中精简版满足属性接收,若要接收函数需要使用稍微复杂版。
<template>
<div id="school">
<h1>Hello World</h1>
<p>我的名字是:{
{ name }}</p>
<p>我的地址是:{
{ address }}</p>
<button @click="changeAddress()">点我改变地址</button>
</div>
</template>
<script>
export default {
name: 'School',
//精简版
// props: ['name', 'address', 'getName'],
//稍微复杂版
props: {
name: String,
address: String,
getName: Function,
},
data() {
return {}
},
methods: {
changeAddress() {
this.getName()
},
},
}
</script>
<style></style>
运行结果: