資訊專欄INFORMATION COLUMN
摘要：中組件的作用域是隔離的，父組件中的數值子組件看不到也就是說，用作比喻，組件的天生是的如果父組件需要往子組件中傳數據，此時應該使用標簽屬性子組件中，用聲明這個值即可?？偨Y中基本類型值默認單向傳遞，雙向加。
Vue中組件的作用域是隔離的，父組件中的數值子組件看不到！也就是說，用angular作比喻，組件的scope天生是scope:()的！
如果父組件需要往子組件中傳數據，此時應該使用標簽屬性：
子組件中，用props聲明這個值即可。并且在template里面可以直接使用{{c}}來獲得這個屬性，而不需要寫為{{this.props.c}}
import Vue from "vue";
const MyCompo = Vue.extend({
template : `
我是MyCompo組件，我的a值是{{a}}
子組件c：{{c}}
`,
props : ["c"],
data : function(){
return {
a : 1,
b : 2
}
},
methods : {
add : function(){
this.a ++;
}
}
});
export default MyCompo;
如果父組件中要傳一個動態的值（就是父組件的data，不是死數），此時要用v-bind:來傳遞。
v-bind指令表示動態屬性。
此時我們研究，子組件改變了這個值，父組件的值變不變。答：默認情況下不變！
import Vue from "vue"; const MyCompo = Vue.extend({ template : ` `, props : ["c"], methods : { add : function(){ this.c ++; } } }); export default MyCompo;我是MyCompo組件，我的a值是{{a}}，我的c值是：{{c}}
子組件的c值變化了，但是外面不變！
也就是說，默認情況下，父組件中的屬性值如果傳給兒子，子組件改變這個值，僅僅改變子組件中的值，父組件中的值不變。
如果非要讓子組件能夠改變父組件中的值，要加sync修飾符：
上面的c屬性是一個基本類型值常數3。此時我們試試引用類型值。
父組件中增加d屬性，值是json。
import Vue from "vue";
import MyCompo from "./components/MyCompo.js";
new Vue({
el : "#app",
data : {
c : 333,
d : {
v : 8888
}
},
components : {
"my-compo" : MyCompo
}
});
傳給子組件：
Vue學習
我是父親，我的c： {{c}} ，我的d:{{d | json}}
子組件改變d的時候，父親也變了！！！雖然我們沒加.sync。
總結：
Vue中基本類型值默認單向傳遞，雙向加sync。
引用類型值，默認雙向傳遞。
小tip，v-bind的縮寫語法就是冒號。
屬性可以驗證類型、必填等等。
props : {
"c" : null,
"d" : null,
"e" : {
type : Number,
required : true
}
},
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88440.html
摘要：兩個同級組件之間傳遞數據，通過傳遞數據。準備工作，我新建了個文件，分別是實例根組件，包含和組件的父組件，的同級組件父組件向子組件傳遞數據，通過傳遞數據。 ??Vue 的單文件組件在使用 Vue 時非常常用，所以我們也會經常遇到組件之間需要傳遞數據的時候，大致分為三種情況： 父組件向子組件傳遞數據，通過 props 傳遞數據。 子組件向父組件傳遞數據，通過 events 傳遞數據。 兩...
摘要：組件基礎與通信一腳手架簡介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實現祖先組件和后代組件之間通信。 Vue組件基礎與通信 一、vue cli腳手架 ① vue cli 簡介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經全局安裝了舊版本的...
摘要：當一個組件沒有聲明任何時，這里會包含所有父作用域的綁定和除外，并且可以通過傳入內部組件在創建高級別的組件時非常有用。 寫在前面 組件間的通信是是實際開發中非常常用的一環，如何使用對項目整體設計、開發、規范都有很實際的的作用，我在項目開發中對此深有體會，總結下vue組件間通信的幾種方式，討論下各自的使用場景 文章對相關場景預覽 父->子組件間的數據傳遞 子->父組件間的數據傳遞 兄弟...
總結一下對vue組件通信的理解和使用。 一、組件目錄結構 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...
總結一下對vue組件通信的理解和使用。 一、組件目錄結構 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...
摘要：在父組件中，需要引用子組件的地方，傳入數據。其實這種方法和中控制器之間傳遞數據的有點類似的。 作用域在vue中，組件實例的作用域是孤立的，父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。下面幾種方法可以實現組件之間數據的傳遞。 通過prop傳遞數據 1）在子組件中，使用prop屬性，顯示的...
閱讀 2203·2021-11-18 10:02
閱讀 3303·2021-11-11 16:55
閱讀 2706·2021-09-14 18:02
閱讀 2445·2021-09-04 16:41
閱讀 2077·2021-09-04 16:40
閱讀 1205·2019-08-30 15:56
閱讀 2223·2019-08-30 15:54
閱讀 3175·2019-08-30 14:15
