Vue学习记录-组件data必须是函数

原创于 2020-06-17 21:13:40 发布 · 215 阅读

CC 4.0 BY-SA版权

本文解析了Vue中组件data属性设置为函数的原因，避免多个组件实例共享同一对象，确保每个实例都有独立的数据副本，增强组件间的隔离性。

<div id="app">
   <cpn></cpn>
   <cpn></cpn>
  </div>
  <script src="../js/vue.js">
  </script>
  <!-- 模版 -->
  <template id="cpn"> 
    <div>
      <h1>{{title}}</h1>
      <p>正文</p>
    </div>
  </template>
  <script>

    Vue.component('cpn',{  //注册全局组件
      template: "#cpn",
      data(){
        return {
          title: "标题"
        }
      }
    })
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        }
     })
  </script>