效果圖： ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <com1 v-bind:parenting="parentDate"></com1> <!-- 這裡想用調用父組件中的數據，必須為父組件的數據綁定一個名稱，並且該名稱在子組件中利用props屬性進行定義 --> <com2 @fun="show"></com2> <!-- 這裡同理，為父組件的方法綁定一個別稱 --> </div> <template id="temp2"> <div @click="myclick"> <h3>這是子組件2</h3> </div> </template> </body> <script src="node_modules\vue\dist\vue.js"></script> <script> let com2 = { template:'#temp2', methods:{ myclick(){ //此時利用emit方法來觸發父組件傳過來的方法 this.$emit('fun');//子組件也可以通過這個方法進行傳參操作 } } } let vm = new Vue({ el: "#app", data: { parentDate: "我是父組件的數據" //子組件不能直接調用父組件中的數據 }, //定義父組件的方法 methods:{ show(){ alert('成功調用了父組件的方法'); } }, components: { com1: { data() {//子組件內數據都是可讀可寫的 return { msg: "hello" } }, //從父組件獲取的數據為只讀，不要去修改，。。即使能修改 template: "<h3>{{msg}}這是子組件-----{{ parenting }}</h3>", //綁定並聲明完成後即可調用，註意此時的名稱為定義的名稱 props: ['parenting'] //綁定數據名稱的聲明 }, com2:com2 } }); </script> </html>
效果圖：
