感覺自己即將完全步入前端大軍，後臺老闆都不需要我弄了，塞翁失馬。。。時間會告訴我們是好是壞
好了言歸正傳，最近vue是搞的不亦樂乎啊，下面來總結一下vue元件間的各種使用方法以及一些技巧
----------------------------------------------------------------------
1.父元件如何向子元件傳引數
<div id="app">
<!-- 傳遞靜態值 --這裡firstBlood為什麼要寫成first-blood上一篇已經說明 -->
<son-demo first-blood="引數值"></son-demo>
<!-- 傳遞動態值 -->
<son-demo :first-blood="giveSon"></son-demo>
<!-- 如果要直接傳遞Boolean值 --這裡的true會被直接解析成true而不是字串 -->
<son-demo :first-blood="true"></son-demo>
</div> <script type="text/x-template" id="sonModel">
<h1>{{firstBlood}}</h1>
</script> <script>
//定義子元件
var sonDemo = {
template: "#sonModel",
props:['firstBlood'],
data(){
return {};
},
}
//父元件
new Vue({
el: '#app',
components: {
sonDemo //也可以這樣寫 sonDemo: sonDemo
},
data: {
giveSon:'給兒子的值'
}
});
</script>
注意：vue不推薦直接在子元件中修改父元件傳來的props的值，會報錯
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "" (found in component )
如果要修改,在子元件裡定義一個新變數來接收↓
data(){
return {
getFirstBlood: this.firstBlood //通過data, 定義新變數getFirstBlood, 這樣getFirstBlood的值變更時，不會影響父元件傳來的firstBlood的值
}
}
還有如果傳遞的引數是陣列型別的話，子元件是可以直接對其進行操作的，同時父元件裡的陣列也會跟著變，如果不想汙染初始值最好還是新定義一個變數接收
2.父元件向子元件傳值時對傳遞的引數進行型別驗證，如果沒傳給個預設值
type 可以是下列原生建構函式中的一個：String、Number、Boolean、Array、Object、Date、Function、Symbol
<div id="app">
<!-- 傳遞動態值 -->
<son-demo :show-or-del="isshow" :first-blood="giveSon"></son-demo>
</div> <script type="text/x-template" id="sonModel">
<h2 v-if="showOrDel"></h2>
<h1>{{firstBlood}}</h1>
</script> <script>
//定義子元件
var sonDemo = {
template: "#sonModel",
props: {
showOrDel: {
type: [Boolean, Number],
required: true
},
firstBlood: {
type: String,
required: '預設值'
}
},
data(){
return {};
},
}
//父元件
new Vue({
el: '#app',
components: {
sonDemo //也可以這樣寫 sonDemo: sonDemo
},
data: {
isshow: false,
giveSon:'給兒子的值'
}
});
</script>
3.子元件如何向父元件傳遞引數 關鍵詞$emit
<div id="app">
<son-demo @giveFatherInfo="getSonInfo"></son-demo>
</div> <script type="text/x-template" id="sonModel">
<button @click="giveDad">點選給父親傳值</button>
</script> <script>
//定義子元件
var sonDemo = {
template: "#sonModel",
data(){
return {
idValue:'123445'
};
},
methods: {
giveDad(){
this.$emit('giveFatherInfo', this.idValue);
}
}
}
//父元件
new Vue({
el: '#app',
components: {
sonDemo //也可以這樣寫 sonDemo: sonDemo
},
data: {
userid: ''
},
methods: {
getSonInfo(v) {
this.userid = v;
},
},
});
</script>
歡迎大家來討論技術，相互學習