Vue组件的复用

组件是可复用的Vue实例1.我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用：注意当点击按钮时，每个组件都会各自独立维护它的count。因为你每用一次组件，就会有一个它的新实例被创建。当我们定义这个 <jishuqi> 组件时，你可能会发现它的data 并不是像这样直接提供一个对象：data: {count: 0}所以一个组件的d

sunny.day

12821人浏览 · 2018-05-15 16:27:17

sunny.day · 2018-05-15 16:27:17 发布

组件是可复用的Vue实例

  1.我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用： 

 
 注意当点击按钮时，每个组件都会各自独立维护它的count。因为你每用一次组件，就会有一个它的新 
 实例 
 被创建。 

  当我们定义这个 <jishuqi> 组件时，你可能会发现它的data 并不是像这样直接提供一个对象： 

data: {
  count: 0
}

 
 所以 
 一个组件的data选项必须是一个函数 
 ，因此每个实例可以维护一份被返回对象的独立的拷贝： 

data: function () {
  return {
    count: 0
  }
}

   代码： 
 

<body>
<div id="pp">
    <jishuqi></jishuqi>
    <jishuqi></jishuqi>
    <jishuqi></jishuqi>
    <jishuqi></jishuqi>
</div>
<script>
    Vue.component("jishuqi",{
        data:function () {
                return {
                    count:0
                }
        },
        template:'<button v-on:click="count+=1">点击了{{count}}次</button>'
    })
    var v=new Vue({
        el:"#pp"
    })
</script>
</body>

运行结果：

    2. 
   如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到 
  

<body>
<div id="p">
    <!--<button v-on:click.once="counter+=1">增加点击次数1</button>-->
    <button v-on:click="counter+=1">点击次数{{counter}}</button>
    <button v-on:click="counter+=1">点击次数{{counter}}</button>
    <button v-on:click="counter+=1">点击次数{{counter}}</button>
    <button v-on:click="counter+=1">点击次数{{counter}}</button>
    <p>目前点击了{{counter}}次</p>
</div>
  <script>
      var v=new Vue({
          el:"#p",
          data:{
              counter:0
          }
      })
  </script>
</body>

    运行结果： 
  

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^