zoukankan      html  css  js  c++  java
  • Vue 组件的data必须是一个函数

    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
    data: function () {
    return {
    count: 0
    }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

    <div id="components-demo">
    <button-counter></button-counter>
    </div>
    new Vue({ el: '#components-demo' })

    因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。

    仅有的例外是像 el 这样根实例特有的选项。

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

    data: {
    count: 0
    }

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

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

  • 相关阅读:
    zkw费用流
    luogu5212/bzoj2555 substring(后缀自动机+动态树)
    后缀数据结构模板2
    后缀数据结构模板1
    通用动态树(Link-Cut Tree)模板
    上下界网络流总结
    多项式多点求值
    拉格朗日反演
    多项式板子·新
    luogu2387 [NOI2014]魔法森林
  • 原文地址:https://www.cnblogs.com/malakaochi/p/9057311.html
Copyright © 2011-2022 走看看