23.组件模板变量分析又组件data为何必须是函数？_组件里面的模板能遍历data数据吗-CSDN博客

本文链接：https://blog.csdn.net/qq_40406929/article/details/118907558

组件内部是不可以直接访问 vue 的实例中的data,可以即使可以间接访问，如果将所有的数据都放在 Vue 实例中，Vue 实例就会变得非常臃肿。

问题：组件怎么访问自己变量？

vue组件应该有自己保存数据的地方，组件对象也有一个data属性；
也可以由methods等属性，下面我们有用到；
只是这个data属性必输是一个函数，而且这个函数返回一个对象，对象内部保存着数据；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="vue">
  <cpn></cpn>
  <cpn2></cpn2>
</div>

<!--第一种写法-->
<!--script 标签，注意类型必须是 text/x-template -->
<script type="text/x-template" id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>我是内容，哈哈哈</p>
  </div>
</script>

<!--第二种写法-->
<!--template标签-->
<template id="cpn2">
  <div>
    <h2>{{title}}</h2>
    <p>我是内容，哈哈哈</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  Vue.component('cpn', {
    template: '#cpn',
    data(){
      return{
        title:'我是标题1'
      }
    }
  })

  Vue.component('cpn2', {
    template: '#cpn2',
    data(){
      return{
        title:'我是标题2'
      }
    }
  })

  const app = new Vue({
    el:'#vue',
    data:{
      message:'你好！华为'
    }
  });

</script>

</body>
</html>