第二十课 Vue组件中的data

Vue组件中的data

Vue组件中的data是独立的，Vue官方不建议各单元互通数据，每个组件有各自的数据对象，类似于Vue示例中的data。

组件中的data对象

组件中的data必须是带有返回值的函数对象

基础示例

<div id="app">
     <test></test>
</div>  

<script>
    Vue.component('test', {
        template: '<h1>{{val}}</h1>',
        data: () => ({
            val: 10
        })
    })

    new Vue({
        el: '#app'
    })
</script>

关于组件中的数据

1）单组件数据共享

以下每个按钮的点击，改变的是同一个数据模型

<div id="app">
     <test></test>
</div>  

<script>
    Vue.component('test', {
         template: `
                    <div>
                        <button @click="num+=1">{{num}}</button>
                        <button @click="num+=1">{{num}}</button>
                        <button @click="num+=1">{{num}}</button>
                    </div>    
                   `,
        data: () => ({
            num: 0
        }),
        methods: {
            fun(){
                this.num++;
            }
        }           
    })

    new Vue({
        el: '#app'
    })
</script>

2）data数据独立

data对象会为不同组件注册不同的数据，同结构不同的组件可以使用不同的独立数据

<div id="app">
     <test></test>
     <test></test>
     <test></test>
</div>  

<script>
    Vue.component('test', {
         template: `
                    <div>
                        <button @click="num+=1">{{num}}</button>
                    </div>    
                   `,
        data: () => ({
            num: 0
        }),
        methods: {
            fun(){
                this.num++;
            }
        }           
    })

    new Vue({
        el: '#app'
    })
</script>

3）公共作用域数据

如果data数据的参数值是域外定义的公共数据，那么所有组件会共享数据

<div id="app">
     <test></test>
     <test></test>
     <test></test>
</div>  

<script>
    let vals = {
        num: 0  //全局作用的公共数据
    }

    Vue.component('test', {
         template: `
                    <div>
                        <button @click="num+=1">{{num}}</button>
                    </div>    
                   `,
        data: () => (vals),
        methods: {
            fun(){
                this.num++;
            }
        }           
    })

    new Vue({
        el: '#app'
    })
</script>