组件数据问题

存放问题

 

​ 前面说过vue组件就是一个vue实例,相应的vue组件也有`data`属性来存放数据。

 

```html
  <div id="app">
    <cpn1></cpn1>
  </div>

 

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>

 

    const app = new Vue({
      el: "#app",
      components: { //局部组件创建
        cpn1:{
          template:'<div>{{msg}}</div>',
          data(){
            return {
              msg:"组件的数据存放必须要是一个函数"
            }
          }
        }
      }
    })
  </script>
```

 

在`template`中使用组件内部的数据`msg`。

 

 
###  组件的data为什么必须要是函数

 

​ 组件的思想是复用,定义组件当然是把通用的公共的东西抽出来复用。

 

```html
<div id="app">
    <h2>data不使用函数</h2>
    <cpn1></cpn1>
    <cpn1></cpn1>
    <hr>
    <h2>data使用函数</h2>
    <cpn2></cpn2>
    <cpn2></cpn2>
    <hr>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <template id="cpn1">
    <div>
      <button @click="count--">-</button>
      当前计数:{{count}}
      <button @click="count++">+</button>
    </div>
  </template>
  <template id="cpn2">
    <div>
      <button @click="count--">-</button>
      当前计数:{{count}}
      <button @click="count++">+</button>
    </div>
  </template>
  <script>
    const obj = {
      count:0
    };
    const app = new Vue({
      el: "#app",
      components: { //局部组件创建
        cpn1: {
          template: '#cpn1',
          data() {
            return obj;
          }
        },
        cpn2: {
          template: '#cpn2',
          data() {
            return {
              count: 0
            }
          }
        }
      }
    })
  </script>
```

 

上述代码中定义了两个组件`cpn1`和`cpn2`,都是定义了两个计数器,`con1`的data虽然使用了函数,但是为了模拟`data:{count:0}`,使用了常量`obj`来返回count。

不使用`data`的好像共用一个`count`属性,而使用函数的`data`的count是各自用各自的,像局部变量一样有块级作用域,这个块级就是vue组件的作用域。

 

> 我们在复用组件的时候肯定希望,各自组件用各自的变量,如果确实需要都用一样的,可以全局组件注册,也可以是用vuex来进行状态管理。

 

posted @ 2021-04-25 10:16  好吗,好  阅读(38)  评论(0)    收藏  举报