组件不可以访问Vue实例的数据，组件应该有自己的数据存放地点。
组件对象有一个data属性，这个属性必须是函数，且这个函数要返回一个对象，对象内部保存数据
Vue组件中的data为什么一定要是函数？
组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响
父子组件的通信：
Vue官方提到：
1. 通过props向子组件传递消息
2.通过事件向父组件发送消息
父传子：
在组件中，使用props来声明要传递的数据
props的值得两种方式：
<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, } })
如果为对象或数组时，则默认值必须为一个函数
props: {
cname: {
type: Array,
dafault() {
return []
}
}
},
子传父：
我们应该使用自定义函数
自定义函数使用场景：
自定义事件的流程：
原文：https://www.cnblogs.com/WEPEDBlogs/p/12312206.html