Vue 根組件,局部,全局組件 | 組件間通訊,案例組件化

時間 2019-11-29

標籤 vue 組件局部全局通訊案例简体版

原文原文鏈接

一組件

<div id="app">
    <h1>{{ msg }}</h1>
</div>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 經過new Vue建立的實例就是根組件(實例與組件一一對應,一個實例就是一個組件)
    // 每一個組件組件均擁有模板,template
    var app = new Vue({
        // 根組件的模板就是掛載點
        el: "#app",
        data : {
            msg: "根組件"
        },
        // 根組件能夠顯式書寫模板嗎? 能夠
        // 模板: 由""包裹的html代碼塊,出如今組件的內部,賦值給組件的$template變量
        // 根組件若是不書寫自身模板,那麼模板就採用掛載點,若是顯式書寫模塊,就會替換掛載點,但根組件必須擁有掛載點
        template: "<div>顯式模板</div>"
    })
    // app.$template
</script>

根組件

<script type="text/javascript">
    // 一個知足vue語法規則的對象就是一個組件
    // 直接來定義這樣的組件,用一個變量名來接收,就是建立了一個局部組件,
    // 變量名就是局部組件的組件名
    // 經過組件名就能夠使用該組件

    // 局部組件要在父組件中使用,必定要提早在父組件中進行註冊

    // 語法規則
    // 有自身模板template,有data/methods/computed/watch...
    var localTag = {
        template: "<div class='sup'><div class='sub'></div></div>"
    }

    var btnTag = {
        // template: "<div><button>按鈕1</button><button>按鈕2</button></div>"
        template: "<button @click='btnAction'>點擊了{{ num }}下</button>",
        // data須要綁定方法,數據經過方法返回值進行處理,達到組件複用時,數據的私有化
        data: function() {
            return {
                num: 0
            }
        },
        methods: {
            btnAction: function () {
                this.num++
            }
        }
    }

    // 根組件
    new Vue({
        el: "#app",
        // 註冊子組件
        components: {
            // 1
            // "localtag": localTag
            // 2
            // "localTag": localTag
            // 3
            // "local-tag": localTag
            // 4
            // localTag: localTag
            // 5 ES6對象語法,key value寫法相同,能夠省略value
            localTag,
            btnTag,

        }
    })
</script>

局部組件 (達到html+css+js代碼塊的複用) data要return,要註冊

<body>
    <div id="app">
        <global-tag v-for="(o, i) in ls" :key="i"></global-tag>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 全局組件
    // 用Vue.component("組件名", {})來建立全局組件
    // 全局組件附屬於Vue實例,能夠不須要註冊就能夠使用
    Vue.component("global-tag", {
        template: "<button @click='btnClick'>{{ n }}</button>",
        data () {
            return {
                n: 0
            }
        },
        methods: {
            btnClick () {
                this.n++
            }
        }
    })

    new Vue({
        el: "#app",
        data: {
            ls: [0, 0, 0]
        }
    })
</script>

全局組件

二組件間通訊

<body>
    <div id="app">
        <local-tag :num="num" :sup_data="sup_data"></local-tag>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 父組件與子組件創建聯繫的關鍵點
    // 同綁定屬性的方式進行數據傳輸
    // 1.給在父組件中出現的子組件名定義標籤的全局屬性
    // 2.全局屬性的值賦值爲父組件的數據變量
    // 3.在子組件內部,經過props拿到標籤中的全局屬性名

    var localTag = {
        props: ['num', 'sup_data'],
        template: "<div @click='divActive'>{{ num }}</div>",
        methods: {
            divActive () {
                console.log(this.num);
                console.log(this.sup_data);
            }
        }
    }

    // 數據屬於父組件,子組件來接收使用數據
    new Vue({
        el: "#app",
        components: {
            localTag
        },
        data: {
            num: 10,
            sup_data: [1, 2, 3, 4, 5]
        }
    })
</script>

父傳子

<div id="app">
    <global-tag @send_data="receive_data"></global-tag>
    {{ n }}
</div>
<script type="text/javascript">
// 1.數據由子級提供
// 2.在子級中經過某個事件對外(this.$emit("事件名", ...args))發送一個事件
// 3.在父級的模板中,子組件名上,爲發送的事件綁定一個回調方法,該回調方法由父級來完成實現體
// 4.在實現體中就能夠拿到回調參數
    Vue.component("global-tag", {
    #子綁定事件
        template: "<div @click='divAction'>我是div</div>",
        data () {
            return {
                num: 10,
                arrList: [1, 2, 3, 4, 5]
            }
        },
        methods: {
            divAction () {
                this.$emit("send_data", this.num, this.arrList)
            }
        }
    });

    new Vue({
        el: "#app",
        data: {
            n: 0
        },
        methods: {
            receive_data (num, arrList) {
                console.log("接收到的數據:", num, arrList);
                this.n = num;
            }
        }
    })
</script>

子傳父

<body>
    <div id="app">
        <div>
            <input type="text" v-model="val">
            <button type="button" @click="submitMsg">提交</button>
        </div>
        <ul>
            <!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->
            <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>
        </ul>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    Vue.component("todo-list", {
        template: "<li @click='delect_action'><span>第{{ i + 1 }}條: </span><span>{{ v }}</span></li>",
        props: ['v', 'i'],
        methods: {
            delect_action () {
                this.$emit("delect_action", this.i)
            }
        }
    })
    

    new Vue({
        el: "#app",
        data: {
            val: "",
            list: []
        },
        methods: {
            submitMsg () {
                // 往list中添加input框中的value
                if (this.val) {
                    this.list.push(this.val);
                    this.val = ""
                }
            },
            delect_action(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>