vue17——组件的data

组件不能直接访问vue示例的数据

<template id="cpn1">
	 <div>
  		<p>访问vue示例的数据：</p>
 		 <h2>{{message}}</h2>      
	</div>
</template>

直接访问vue示例数据：

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'hello~vue!'
  },
  components:{
    cpn1: {
      template: '#cpn1'
    }
  }
})
</script>

无法访问，且浏览器报错

正确写法：

components:{
    cpn1: {
      template: '#cpn1',
      data(){
        return {
          message: 'i am cpn1'
        }
      }
    }
  }

注意：组件中，data是一个函数， 且要返回一个对象

否则组件实例中可能会发生一系列相互影响

eg。

<cpn1></cpn1>
<cpn1></cpn1>
<cpn1></cpn1>

若data不是函数，则在一个cpn1里修改数据，其他cpn1的数据也会随之改变