vue組件中的data與methods

本文轉載自查看原文 2019-10-23 20:15 1726 vue

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <mycom></mycom>
        <counter></counter>
    </div>
    <template id="temp">
        <div>
            <input type="button" value="+1" @click="increment">
            {{count}}
        </div>
    </template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
    //組件中的data和實例中的不一樣，實例中的data是一個對象，而組件中的data則是一個方法並且返回一個對象
    Vue.component("mycom", {
        template: "<h3>{{msg}}，這是一個組件</h3>", //引用時與實例一致
        data: function () {
            return { //返回對象是為了區分各個組件中的數據，因為不同組件返回的對象的地址都不一致所以不會產生影響
                msg: "hello" //組件中定義的數據
            }
        }
    })
    //添加一個增值函數
    Vue.component("counter", {
                template:"#temp",
                data: function () {
                    return {
                        count: 0
                    }
                },
                methods: {
                    increment() {
                        this.count++
                    }
                }
            }); 
                let vm = new Vue({
                el: "#app",
                data: {

                }
            });
</script>

</html>

　　效果圖

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue中組件的data和methods Vue系列之 => 組件中的data和methods vue 父組件使用子組件中的data或methods VUE 中data與methods區別 Vue中組件的methods方法 vue中的data的屬性可以和methods中方法同名嗎？ vue中子組件的methods中獲取到props中的值 Vue.js組件中methods中的this的指向 Vue 組件中data為什么是函數 vue組件中data為什么必須是個函數