vuejs2.0子組件改變父組件的數據

本文轉載自查看原文 2017-03-27 23:20 14793 vue

在vue2.0之后的版本中，不允許子組件直接改變父組件的數據，在1.0的版本中可以這樣操作的，但是往往項目需求需要改變父組件的數據，2.0也是可一個，區別是，當我們把父元素的數據給子組件時，需要傳一個對象，子組件通過訪問對象中的屬性操作數據，下面是演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>    
    <script type="text/javascript">
        window.onload = function(){
            var app = new Vue({
            el:'#box',
            data:{
                myData:{
                    info:'父組件信息'
                }
            },
            components:{
                'v-com':{
                    props:['data'],
                    template:'#tpl',
                    methods:{
                        change(){
                            this.data.info = 'change info'
                        }
                    }
                }
            }
        })
        }
    </script>
</head>
<body>
    <!-- 子組件改變父組件的數據 -->
    <div id="box">
        <div>
            <p>{{myData.info}}</p>
            <v-com :data ="myData"></v-com>
        </div>
    </div>

    <!-- 模板 -->
    <template id="tpl">
        <div>
            <button @click="change">change</button>
            <p>{{data.info}}</p>
        </div>
    </template>

</body>
</html>

這種是同步改變數據，就是說子組件的數據改變，父組件數據也跟着改變，下面展示非同步的情況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>    
    <script type="text/javascript">
        window.onload = function(){
            var app = new Vue({
            el:'#box',
            data:{
                myData:'父組件信息'
            },
            components:{
                'v-com':{
                    data() {
                        return {
                            childData:''
                        }
                    },
                    props:['data'],
                    // dom渲染完畢
                    mounted(){
                        this.childData = this.data
                    },
                    template:'#tpl',
                    methods:{
                        change(){
                            this.childData = 'change info'
                        }
                    }
                }
            }
        })
        }
    </script>
</head>
<body>
    <!-- 子組件改變父組件的數據,不同步 -->
    <div id="box">
        <div>
            <p>{{myData}}</p>
            <v-com :data ="myData"></v-com>
        </div>
    </div>

    <!-- 模板 -->
    <template id="tpl">
        <div>
            <button @click="change">change</button>
            <p>{{childData}}</p>
        </div>
    </template>

</body>
</html>

這里巧妙的通過mounted這個方法進行了中轉，實現了想要的效果

免責聲明！

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

猜您在找 vuejs子組件向父組件傳遞數據 vuejs2.0實現分頁組件，使用$emit進行事件監聽數據傳遞 vuejs利用props，子組件修改父組件的數據，父組件修改子組件的的數據，數據類型為數組 vue子組件數據跟着父組件改變 vue子組件改變父組件的值 react 子組件改變父組件狀態子組件如何改變父組件的state vue父組件給子組件傳的數組沒改變 vue子組件改變父組件的值 Vue中子組件數據跟着父組件改變和父組件數據跟着子組件改變的方法