Vue之組件間傳值

時間 2019-12-14

標籤 vue 組件简体版

原文原文鏈接

標籤： Vuehtml

Vue之父子組件傳值

父向子傳遞經過props
子向父傳遞經過$emit

代碼示例以下：vuex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父子組件傳值</title>
    <script src="./bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <counter :count="num1" @add="handAddTotal"></counter>
        <counter :count="num2" @add="handAddTotal"></counter>
        求和:{{total}}
    </div>
    <script>
        //自定義組件
        var counter = {
            props:['count'],//經過屬性由父向子傳值
            data: function() {
                return {
                    number: this.count//子組件內接收父級傳過來的值
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',
            methods: {
                handleClick: function() {
                    this.number ++;
                    //經過向外觸發事件由子級向父級傳值
                    this.$emit('add',1);
                }
            }
        };
        var vm = new Vue({
            el: '#app',
            //組件註冊
            components: {
                counter
            },
            data:{
                num1:1,
                num2:2,
                total: 3
            },
            methods:{
                //求和
                handAddTotal:function(step){
                    this.total += step;
                }
            }
        });
    </script>
</body>
</html>

注意事項:app

props傳過來值，根據單向數據流原則子組件不可直接拿過來修改，能夠在子組件的data裏定義一個變量轉存再來作修改
爲了保證各組件數據的獨立性，子組件的data應該以一個函數返回一個對象的形式來定義，見上示例代碼23行

Vue之非父子組件傳值

經過bus方式傳遞，也能夠叫總線/發佈訂閱模式/觀察者模式
經過vuex傳遞

bus/總線/發佈訂閱模式/觀察者模式演示地址
 vuex演示地址
bus方式示例代碼以下:函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父子組件傳值(bus/總線/發佈訂閱模式/觀察者模式)</title>
    <script src="./bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <child-one content="hello"></child-one>
        <child-two content="world"></child-two>
    </div>
    <script>
        Vue.prototype.bus = new Vue();
        //自定義組件
        var childOne = {
            //經過屬性由父向子傳值
            props:{
                'content':String
            },
            data:function(){
                return {
                    contentIn:this.content
                }
            },
            template: '<div @click="handleClick">{{contentIn}}</div>',
            methods: {
                handleClick: function() {
                    //經過觸發事件向各組件發送數據
                   this.bus.$emit('change',this.contentIn);
                }
            },
            mounted:function () {
                var that = this;
                //組件接收事件
                this.bus.$on('change',function(val){
                    that.contentIn = val;
                });
            }
        };
        //自定義組件
        var childTwo = {
            //經過屬性由父向子傳值
            props:{
                'content':String
            },
            data:function(){
                return {
                    contentIn:this.content
                }
            },
            template: '<div @click="handleClick">{{contentIn}}</div>',
            methods: {
                handleClick: function() {
                    //經過觸發事件向各組件發送數據
                    this.bus.$emit('change',this.contentIn);
                }
            },
            mounted:function () {
                var that = this;
                //組件接收事件
                this.bus.$on('change',function(val){
                    that.contentIn = val;
                });
            }
        };
        var vm = new Vue({
            el: '#app',
            //註冊組件
            components: {
                childOne,
                childTwo
            }
        });
    </script>
</body>
</html>

vuex方式示例代碼以下:ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父子組件傳值(vuex)</title>
    <script src="./bower_components/vue/dist/vue.js"></script>
    <script src="./bower_components/vuex/dist/vuex.js"></script>
</head>
<body>
    <div id="app">
        <child-one></child-one>
        <child-two></child-two>
    </div>
    <script>
        Vue.use(Vuex);
        var store = new Vuex.Store({
            state: {
                count:0
            },
            mutations: {
                increment:function(state){
                    console.log(123);
                    state.count++;
                }
            },
            actions: {
                increment:function(context){
                    context.commit('increment')
                }
            },
            getters: {
                getCount:function(state){
                    return state.count;
                }
            }
        });
        //自定義組件
        var childOne = {
            computed: {
                countIn:function(){
                    return store.getters.getCount
                }
            },
            template: '<div @click="handleClick">{{countIn}}</div>',
            methods: {
                handleClick: function() {
                    store.dispatch('increment');
                }
            }
        };
        //自定義組件
        var childTwo = {
            computed: {
                countIn:function(){
                    return store.getters.getCount
                }
            },
            template: '<div @click="handleClick">{{countIn}}</div>',
            methods: {
                handleClick: function() {
                   store.dispatch('increment');
                }
            }
        };
        var vm = new Vue({
            el: '#app',
            store,
            //註冊組件
            components: {
                childOne,
                childTwo
            }
        });
    </script>
</body>
</html>

附上vuex官網地址:https://vuex.vuejs.org/zh/this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。