深刻理解--VUE組件中數據的存放以及爲何組件中的data必需是函數

時間 2019-11-07

標籤深刻理解 vue 組件數據存放以及爲何 data 必需函數简体版

原文原文鏈接

一、組件中數據的存放

***（重點）組件是一個單獨模塊的封裝：這個模塊有本身的HTML模板，也有data屬性。

只是這個data屬性必需是一個函數，而這個函數返回一個對象，這個對象裏面存放着組件的數據。

    <template id="MyCpn">
        <div>
            <h2>組件數據的存放 </h2>
            <p>{{title}}</p>
        </div>
    </template>
    <script>
        Vue.component('cpn', {
            template: '#MyCpn',
            data() {
                return {
                    title: '我是組件中的專屬數據'
                }
            }
            // 組件是一個單獨模塊的封裝：這個模塊有本身的HTML模板，也有data數據。
        })

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <cpn></cpn>
</div>

<body>
    <template id="MyCpn">
        <div>
            <h2>組件數據的存放 </h2>
            <p>{{title}}</p>
        </div>
    </template>
    <script>
        Vue.component('cpn', {
            template: '#MyCpn',
            data() {
                return {
                    title: '我是組件中的專屬數據'
                }
            }
            // 組件是一個單獨模塊的封裝：這個模塊有本身的HTML模板，也有data數據。
        })
        let vm = new Vue({
            el: '#app',
            data: () => ({
                title: "我是頂層Vue實例中的數據，外部組件能訪問個人數據嗎？"
            })
        })
    </script>
</body>

</html>

解析：當你在調用title變量的時候，只能訪問到組件內部定義的變量，由於組件是一個單獨模塊的封裝。

二、爲何組件中的data必需是函數

由於組件是要重複使用的，當data是函數而且在屢次調用的時候，所佔的內存塊不同，因此data中的數據互不影響。

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>

<body>
    <template id="MyCpn">
        <div>
            <h2>當前計數:{{content}}</h2>
            <button @click="res">-</button>
            <button @click="add">+</button>
        </div>
    </template>
    <script>
        Vue.component('cpn', {
            template: '#MyCpn',
            data() {
                return {
                    content: 0
                }
            },
            methods: {
                add() {
                    this.content++
                },
                res() {
                    this.content--
                }
            }
        })
        let vm = new Vue({
            el: '#app',
            data: () => ({
                title: "我是頂層Vue實例中的數據，外部組件能訪問個人數據嗎？"
            })
        })
    </script>
</body>

</html>

反過來，若是data不是用函數的話，在屢次調用組件的時候，這裏面的數據相互影響

*完整代碼**

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>

<body>
    <template id="MyCpn">
        <div>
            <h2>當前計數:{{counter}}</h2>
            <button @click="res">-</button>
            <button @click="add">+</button>
        </div>
    </template>
    <script>
        const obj = {
            counter: 0
        }
        Vue.component('cpn', {
            template: '#MyCpn',
            data() {
                return obj
            },
            methods: {
                add() {
                    this.counter++
                },
                res() {
                    this.counter--
                }
            }
        })
        let vm = new Vue({
            el: '#app',
            data: () => ({
                title: "我是頂層Vue實例中的數據，外部組件能訪問個人數據嗎？"
            })
        })
    </script>
</body>

</html>