单向数据流
- Vue 提倡单向数据流，即父组件通过
props 传递数据到子组件，子数据无权修改父组件的数据。目的时为了防止应用数据的流向边得混乱，难以理解。
- 只能通过
$emit 派发一个自定义事件给父组件，由父组件来修改数据
父子组件间通信
- 父组件通过
:data="data" 传递数据
- 父组件通过
@fun="fun" 传递方法
// 父组件 $emitFa.vue
<template>
<div>
<h1>父组件数据：{{msg}}</h1>
<emit-ch :sendData="msg" @updateInfo="updateInfo"></emit-ch>
</div>
</template>
<script>
import emitCh from './$emitCh'
export default {
components: { emitCh },
data () {
return {
msg: '北京'
}
},
methods: {
updateInfo (data) {
this.msg = data.city
}
}
}
</script>
- 子组件通过
props 接收父组件传递的值
- 子组件通过
$emit 调用父组件的方法并传递数据
// 子组件 $emitCh.vue
<template>
<div>
<h3>父组件传给子组件的数据：{{sendData}}</h3>
<br/>
<button @click='select()'>调用父组件的 updateInfo 方法</button>
</div>
</template>
<script>
export default {
props: ['sendData'], // 接收父组件的数据
data () {
return {
}
},
methods: {
select () {
let data = {
city: '上海'
}
this.$emit('updateInfo', data) // 触发父组件的 updateInfo方法
}
}
}
</script>
