子组件调用父组件方法_14、父组件向子组件通信

本文重点：

1. 不使用 v-bind 传递数据；
2. 使用 v-bind 传递数据；
3. 以上两者的区别。

---

先把重要的知识点写在前面：

• 子组件使用 props 接收父组件传过来的数据；
• props 的值可以是数组，也可以是对象，本文先使用数组；
• props 中定义的属性， 子组件可以直接使用。

简单来说，父组件向子组件传递数据可以分为以下几个步骤：

1. 在父组件绑定数据；
2. 在子组件使用 props 接收数据；
3. 在子组件使用数据。

一、父组件直接向子组件传递数据（不使用 v-bind）

<div id="app">
    <child-component msg="你的晚安"></child-component>    // 2. 渲染子组件，并传递 msg
</div>

var app = new Vue({
  el: '#app',
  data: {},
  components: {    // 1.定义子组件
    'child-component': {
      props: ['msg'],  // 3. 子组件使用 props 接收父组件传递的 msg
      template: '<h1>{{ msg }}</h1>'  // 4. 在 template 中使用 msg
    }
  }
})

渲染：

二、使用 v-bind 绑定数据

<div id="app">
    <input type="text" v-model="text">  // 1.input 中使用 v-model 动态绑定了父组件中的 text
    <child-component :dong="text"></child-component>  // 2.在子组件上绑定 dong 属性，值为父组件中的 text
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '是下意识的侧影'
  },
  components: {
    'child-component': {
      props: ['dong'],  // 3.接收 dong 属性
      template: '<h2>{{ dong }}</h2>'  // 4.使用 dong 属性
    }
  }
})

渲染效果默认是这样的：

因为子组件中的内容，是父组件通过使用 v-bind 传递过来的，传过来的就是父组件中的 text。而父组件中的 input 又使用了 v-model 绑定了 text，所以，当改变 input 中的内容时，父组件中的 text 就会改变，text 又传递到子组件，子组件中的内容也会跟着改变。如：

三、不使用 v-bind 和 使用 v-bind 的区别

<div id="app">
    <dong-component dong="[1, 2, 3]"></dong-component>    // 3.dong组件没有用 v-bind，传了一个数组
    <liang-component :liang="[1, 2, 3]"></liang-component>  // 4.liang组件用了 v-bind，传了一个数组
</div>

var app = new Vue({
  el: '#app',
  data: {},
  components: {
    'dong-component': {    // 1.dong组件
      props: ['dong'],  // 5.接收 dong
      template: '<h2>{{ dong.length }}--{{ typeof dong }}</h2>'  // 6.显示数组的长度和类型
    },
    'liang-component': {  // 2.liang组件
      props: ['liang'],  // 7. 接收 liang
      template: '<h2>{{ liang.length }}--{{ typeof liang }}</h2>'  // 8. 显示数组的长度和类型
    }
  }
})

渲染效果：

可以看到，没有使用 v-bind 的子组件，看起来像是传了一个数组，可其实并不是数组，而是字符串。使用的 v-bind 的子组件，看起来传的是数组，其实它真的是数组。

总结成一句话就是：不使用 v-bind，传的是字符串；使用 v-bind，传的是什么就是什么。

你也可以尝试传递其他类型的值试一试。