在之前已经学习过如何创建组件和引入组件。这次来学习一下怎么在父子组件之间传递数据，这在实际开发过程中会经常涉及到。
值得注意的是，这里只讨论父子组件之间的数据传递，而两个子组件之间的数据传递可通过父组件做中转，间接进行。

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不会改变。