在之前已经学习过如何创建组件和引入组件。这次来学习一下怎么在父子组件之间传递数据，这在实际开发过程中会经常涉及到。
值得注意的是，这里只讨论父子组件之间的数据传递，而两个子组件之间的数据传递可通过父组件做中转，间接进行。
prop
通过在子组件中设置prop，可接收来自父组件的数据。
子组件代码如下：
<template>
<div style="text-align: center">
<h3>{{ postTitle }}</h3>
</div>
</template>
<script>
export default {
props: ['postTitle'] //props中的参数用于接受父组件的传参
}
</script>
父组件：
<template>
<!-- 使用子组件 -->
<todo-item post-title="title"></todo-item>
<!-- 这里的post-title与子组件中的postTitle相对应，进行传参 -->
</template>
<script>
import todoItem from './components/todo-item' //引入子组件
export default {
name: 'app1',
component: [todoItem] //注册子组件
}
</script>
这是同时prop进行静态传参，我们可以结合v-bind进行动态传参。子组件代码不变，我们来看一下父组件代码：
<template>
<!-- 这里我们通过v-bind绑定data中的title给子组件中的postTitle -->
<todo-item v-bind:post-title="title"></todo-item>
</template>
<script>
import todoItem from './components/todo-item'
export default {
name: 'app1',
data () {
return {
title: '标题：这是一个组件'
}
},
component: [todoItem]
}
</script>
如果使用静态传参，那么传过去的值全都是字符串类型，如果要传递其他类型，请使用v-bind进行动态传参，比如我们要传递数字，父组件代码：
<todo-item post-title="1+1"></todo-item>
...
<todo-item v-bind:post-title="1+1"></todo-item>
大家可以对比一下结果。
$emit
通过触发监听$emit方法我们可以实现子组件使用父组件的方法。
子组件代码
<template>
<div style="text-align: center">
<h3>{{ postTitle }}</h3>
<!-- v-on绑定click事件，被点击时，执行$emit('enlarge-text')，触发enlarge-text方法 -->
<button v-on:click="$emit('enlarge-text')"> 放大字体 </button>
</div>
</template>
<script>
export default {
props: ['postTitle']
}
</script>
父组件
<template>
<div :style="{ fontSize: postFontSize + 'em' }">
<!-- v-on绑定enlarge-text方法，当该方法触发时，执行postFontSize += 0.1 -->
<todo-item :post-title="title" v-on:enlarge-text="postFontSize += 0.1"></todo-item>
</div>
</template>
<script>
import todoItem from './components/todo-item'
export default {
name: 'app1',
data () {
return {
title: '标题：这是一个组件',
postFontSize: 1
}
},
component: [todoItem]
}
</script>
ref
通过ref我们可以将子组件数据传递给父组件。
子组件不需要做任何改变，只需放置一些数据和方法：
<template>
<div style="text-align: center">
<h3>{{ postTitle }}</h3>
</div>
</template>
<script>
export default {
props: ['postTitle'],
data () {
return {
message: '信息'
}
},
methods: {
fn () {
alert('hello')
}
}
}
</script>
在父组件中，给子组件标签添加ref标识，即可在父组件中访问子组件数据。使用this.$refs.标识符名字即可定位到子组件。
<template>
<div style="text-align: center">
<!-- 添加ref标识符 -->
<todo-item ref="child" :post-title="title"></todo-item>
<button @click="fn">按钮</button>
</div>
</template>
<script>
import todoItem from './components/todo-item'
export default {
name: 'app1',
data () {
return {
title: '标题：这是一个组件'
}
},
component: [todoItem],
methods: {
fn () {
//注意这里使用的是refs，而不是ref
console.log(this.$refs.child.message)
this.$refs.child.fn()
}
}
}
</script>
.sync
.sync 修饰符作为一个编译时的语法糖存在,在使用时它会被扩展为一个自动更新父组件属性的 v-on 监听器。
<comp :foo.sync="bar"></comp>
<!-- 扩展为 -->
<comp :foo="bar" @update:foo="val => bar = val"></comp>
...
//当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)
看一下案例：
子组件
<template>
<div style="text-align: center">
<h3>{{ postTitle }}</h3>
<h3>{{ num }}</h3>
<h3>{{ number }}</h3>
<button @click="fn2">naniu</button>
</div>
</template>
<script>
export default {
props: ['postTitle', 'number'],
data () {
return {
num: this.number
}
},
methods: {
fn2 () {
this.$emit('update:number', ++this.num)
}
}
}
</script>
父组件：
<template>
<div style="text-align: center">
<todo-item ref="child" :post-title="title" :number.sync="num"></todo-item>
</div>
</template>
<script>
import todoItem from './components/todo-item'
export default {
name: 'app1',
data () {
return {
title: '标题：这是一个组件',
num: 1
}
},
component: [todoItem]
}
</script>
点击按钮，可以发现两个数字都发生改变，如果不加.sync修饰符，会发现只有子组件中的数据num 发生改变，而来自父组件的数字number不会改变。
