单文件组件.vue---父子组件通信

每一个.vue 文件就是一个组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue 中，在一个组件中通过 import 引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。

【一】父组件→子组件

（1）父组件传递数据

　在vue-cli 项目中，src 文件夹下有一个App.vue 文件，它的script标签中

import HelloDemo from './components/HelloDemo'

那么 App.vue 就是父组件，components 文件夹下的HelloDemo.vue 就是子组件。父组件通过props 向子组件传递数据，子组件通过自定义事件向父组件传递数据。

　父组件向子组件传值, 它主要是通过元素的属性进行的. 在App.vue 的template中,有一个

<hello-demo></hello-demo>

这就是我们引入的子组件. 给其添加属性如

<hello-demo :mes-father="mesFather"></hello-demo>

父组件数据mesFather为

return {
        'mesFather':'message from father，我是来自父组件的数据'
      }

父组件将数据传递进去,子组件需要接收才能使用. 怎样接收呢?

（2）子组件接收数据

在HelloDemo.vue 中, export default 后面的对象中,添加一个字段props, 它是一个数组, 专门用来接收父组件传递过来的数据. props: ["mesFather"], 这里定义了mesFather 字符串, 和父组件中定义的元素的属性一一对应。

  export default{
    props:['mesFather']
  }

但是我们在父组件,就是在 <hello-demo> 元素中定义的属性是mes-father，没有一一对应啊? 这主要是因为，在html 元素中大小写是不敏感的。

如果我们写

<hello-demo :mesFather="mesFather"></hello-demo>

里面的mesFather 就会转化成mesfather, 相当于我们向子组件传递了一个mesfather数据，如果在js 文件中，我们定义 props: ["mesFather"]，我们是接受不到数据的，因为js 是区分大小写的，所以只能写成props: ["mesfather"]。

但是在js 文件中，像这种两个单词拼成的数据，我们习惯用驼峰命名法，所以vue 做了一个转化，如果在组件中属性是 - 表示，它自动会转化成驼峰式。传进来的数据是mes-father, 转化成mesFather, 我们在js 里面写mesFather, 一一对应，子组件可以接受到组件。 props 属性是和data， methods 属性并列的，属同一级别。 props 属性里面定义的变量，在子组件中的template 中可以直接使用。

App.vue 的template 更改如下：

①<hello-demo :mes-father="mesFather"></hello-demo>

②import HelloDemo from './components/HelloDemo'
export default{
  name: 'App',

  data(){
    return {
      'mesFather':'message from father，我是来自父组件的数据'
    }
  },

③components: {HelloDemo} 
}

HelloDemo.vue组件：

<template>
  <div>
    <h1>Hello页面</h1>
    ①<p>{{mesFather}}</p>
  </div>
</template>
<script>
  export default{
    ②props:['mesFather']
  }
</script>

这时，在页面中看到 ‘message from father，我是来自父组件的数据’ 字样，父元素向子元素传递数据成功。

【二】子组件→父组件

单文件组件.vue---父子组件通信

猜你喜欢