標籤：img meta cli 傳遞 ack hang 更新 變化 new
在上一篇的父子組件中，我們知道，當我們使用動態props將父組件的資料傳遞到子組件的時候，如果父組件的資料變化，子組件的資料會隨之變化。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="bower_components/vue/dist/vue.js"></script></head><body> <div id="box"> <aaa></aaa> </div> <template id="aaa"> <p @click="changeText">我是父組件</p> <bbb :c-mess="pmsg"></bbb> </template> <script> var vm=new Vue({ el:‘#box‘, data:{ a:‘aaa‘ }, components:{ ‘aaa‘:{ data(){ return { ‘pmsg‘:‘動態props‘, } }, template:‘#aaa‘, methods:{ changeText(){ this.pmsg = ‘資料流‘ } }, components:{ ‘bbb‘:{ props:[‘c-mess‘], template: ` <div> <div>我是子組件 --- {{cMess}}</div> <div> `, } } } } }); </script></body></html>
父組件資料變化時，子組件資料會相應變化；而子組件資料變化時，父組件資料不變
我們知道，子組件的值是通過emit主動發送到父組件的，需要事件驅動，如果子組件的資料發生改變時，沒有事件驅動，父組件的資料並不能隨之更新。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="bower_components/vue/dist/vue.js"></script></head><body> <div id="box"> <aaa></aaa> </div> <template id="aaa"> <div> <span>父組件資料</span> <input v-model="msg"> </div> <p>{{msg}}</p> <bbb :child-msg="msg"></bbb> </template> <script> var vm=new Vue({ el:‘#box‘, components:{ ‘aaa‘:{ data(){ return { ‘msg‘:‘match‘ } }, template:‘#aaa‘, components:{ ‘bbb‘:{ props:[‘childMsg‘], template: ` <div> <span>子組件資料</span> <input v-model="childMsg"> </div> <p>{{childMsg}}</p> `, } } } } }); </script></body></html>
單向資料流
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
