Vue组件记录, 待看源码解决/补充

- [ 1 ] Vue对象的component方法,为什么不能用如下方法注册组件?

    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    

      },
    });
    app.prototype.component('my-cpn', cpnC);

- [ 2 ] 组件能否访问Vue实例内部data里的数据-------不能

  <div id='app'>
    <!-- 这里组件里写message,不生效 -->
    <cpn2>{
    
    {
    
    message}}</cpn2>
  </div>

  <script>
    //1.利用Vue的extend方法, 创建组件构造器对象; template代表我们自定义组建的模板
    const cpnC1 = Vue.extend({
    
    
      template: `  
        <div id=''>
          <h2>标题</h2>
          <h3>这是1111组件</h3>
        </div>`
    });
    const cpnC2 = Vue.extend({
    
    
      template: `  
        <div id=''>
          <h2>标题</h2>
          <h3>这是22222组件</h3>
          <cpn1></cpn1>
        </div>`,
      components: {
    
    
        cpn1: cpnC1,
      }
    });

    //2. 利用Vue的component方法注册全局组件
    // Vue.component('my-cpn', cpnC);

    //注意:组件必须使用在绑定的实例内,所以下面这一步也不能少
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        message: 'hello',
      },
      //或者在实例里面注册局部组件
      components: {
    
    
        // cpn2: cpnC2,
        // cpn1: cpnC1,
        'cpn2': cpnC2,
      }
    });

3. 组件内部data属性，为什么必须是函数格式

2里面说到组件不能访问Vue实例内的data数据，那么组件就要有自己存数据的地方。组件自己有个data属性，但是为什么这个data属性必须是函数呢？而且此data函数返回一个存放数据的对象。

原因就是：如果data是对象名称，data={}的格式，那么data是一个引用，而写成函数格式 data(){return{}}, 那么每次调用data时会返回一个新对象；

举个栗子：

  <div id='app'>
    <!-- 这里复制好多个组件 -->
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

  <template id="cpnC">
    <div>
      <h2>当前计数:{
   
   {counter}}</h2>
      <button @click='increment'>+</button>
      <button @click='decrement'>-</button>
    </div>
  </template>
  <script>
    //1.注册组件
    Vue.component('cpn', {
      
      
      template: '#cpnC',
      data() {
      
      
        return {
      
      
          counter: 0,
        }
      },
      methods: {
      
      
        increment() {
      
      
          this.counter++;
        },
        decrement() {
      
      
          this.counter--;
        }
      },

    });
    const app = new Vue({
      
      
      el: '#app',
      data: {
      
      
        message: '你好啊',
      },
    });
    console.log(app);
  </script>

上面写了个简单的计数器组件，同时复制多个。如果data是函数，意味着每个组件的数据都是一个新返回值，在内存里是相互独立的，改变一个计数器的±时，不会对其他计数器产生影响: