Vue组件二

组件不可以访问Vue实例的数据，组件应该有自己的数据存放地点。

组件对象有一个data属性，这个属性必须是函数，且这个函数要返回一个对象，对象内部保存数据

Vue组件中的data为什么一定要是函数？

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响

父子组件的通信：

Vue官方提到：

1. 通过props向子组件传递消息

2.通过事件向父组件发送消息

父传子：

 

    在组件中，使用props来声明要传递的数据

    props的值得两种方式：

1. 字符串数组，数组中的字符就是传递时的名称

<div id="app">    
<cpn :cmessage="message" v-bind:cname="name"></cpn>
  </div>
  <template id='cpn'>
    <div>
      <p>{{cmessage}}</p>
      <h4>{{cname}}</h4>
    </div>
  </template>
  <script src="Js/vue.js"></script>
  <script>  
//子组件
    const cpn = {
      template: '#cpn',
      props: ['cmessage','cname'],// 字符串数组
}
　　　　cmessage: {
　　　　　　type: String,
　　　　　　dafault: 'nihao'
}
      data () {
        return {
        }
      }
    }
//父组件
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        name: ['lili', 'huawei', 'Mi']
      },
      components: {
        'cpn': cpn,
      }
    })

1. 对象，对象可以设置传递时的类型，也可以设置默认值等，支持的类型有： String,Number,Boolean,Array,Object,Date,Function,Symbol.当有自定义构造函数时，验证也支持自定义的类型

如果为对象或数组时，则默认值必须为一个函数

  props: {
        cname: {
          type: Array,
          dafault() {
            return []
          }
        }
      },

 

子传父：

我们应该使用自定义函数

自定义函数使用场景：

1. 当子组件需要向父组件传递数据时，就要使用自定义事件。
2. v-on不仅可以用于监听DOM事件，也可以用于组件间的自定义事件。

自定义事件的流程：

1. 在子组件中，通过$emit()来触发事件
2. 在父组件中，通过v-on来监听组件事件