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

本文探讨了Vue中组件注册的正确方式,解释为何不能在Vue实例的原型上注册组件,以及组件内部为何需要使用函数格式的data属性来确保数据独立性。通过示例展示了如何在实例中注册局部组件,并阐述了组件间数据隔离的重要性。
摘要由CSDN通过智能技术生成

- [ 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是函数,意味着每个组件的数据都是一个新返回值,在内存里是相互独立的,改变一个计数器的±时,不会对其他计数器产生影响:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值