在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這個方法進行了中轉，實現了想要的效果
新聞熱點
疑難解答
圖片精選
