VUE中父子元件傳參（簡單明瞭）
· 父元件向子元件傳遞引數
child.vue如下
<template> <div class="childClass"> <h3>子元件內容</h3> <p :class="num==6?redclass:blueclass">當父元件內容傳遞給子元件時，該行變成紅色</p> <p>父元件向子元件傳遞的引數是：{{num}}</p> </div> </template> <style lang='css'> .redclass { color:red; } .blueclass { color:blue; } </style> <script> export default { data(){ return { redclass:'redclass', blueclass:'blueclass', } }, props:['num'], //使用字串陣列的形式!! // props:{ //當props是一個物件時，他包含驗證要求 // num:{ // type:Number, // default:100, // }, // } } </script>
parent.vue如下
<template> <div cals="parent"> <h3>這是父元件的內容</h3> <hr> <Child :num="parentNum"></Child> </div> </template> <script> import Child from './child.vue' export default { components:{ Child }, data(){ return { parentNum:6, } }, } </script>
實現原理如下：
· 子元件在props中建立一個屬性如上的num，用來接收父元件中傳遞過來的值；
· 父元件中註冊子元件，如components:{Child}
· 父元件中使用子元件標籤，並在子元件標籤中新增子元件props中建立的屬性，如 <Child :num=””></Child>
· 把需要傳遞給子元件的值賦值給該屬性，如<Child :num=”value”></Child>
------------------------------------------------------------------------------------------
· 子元件向父元件傳遞引數
parent.vue如下
<template>
<div cals="parent">
<h3>這是父元件的內容</h3>
<p :class='num==8?redclass:blueclass'>當子元件向父元件傳遞引數成功後，該行文字變紅色</p>
<p>父元件從子元件獲取的引數是：{{num}}</p>
<hr>
<Child @listenToChildEvent="showMsgFromChild"></Child>
</div>
</template>
<style>
.redclass {
color:red;
}
.blueclass {
color:blue;
}
</style>
<script>
import Child from './child.vue'
export default {
components:{ Child },
data(){
return {
num:0, //宣告需要接受子元件引數的屬性
redclass:'redclass',
blueclass:'blueclass',
}
},
methods:{
showMsgFromChild(data){
this.num=data; //將子元件觸發該事件時傳遞的引數賦值給父元件的屬性
console.log(data);
}
}
}
</script>child.vue如下
<template>
<div class="childClass">
<h3>子元件內容</h3>
<p>子元件向父元件傳遞的引數是：{{childNum}}</p>
<button @click="sendMsgToParent()">點選傳遞引數</button>
</div>
</template>
<script>
export default {
data(){
return {
childNum:8,
}
},
methods:{
sendMsgToParent(){
this.$emit('listenToChildEvent',this.childNum);
}
}
}
</script>實現原理如下：
·父元件使用子元件標籤，子元件標籤中使用 v-on繫結自定義事件來監聽該事件的觸發 ，以及該自定義事件的相應函式（接收處理子元件傳遞的引數），如<Child @listenToChildEvent="showMsgFromChild()"></Child> showMsgFromChild(data){ this.num=data; }
·子元件中觸發該自定義事件，並傳遞子元件中的引數，如
sendMsgToParent(){ this.$emit('listenToChildEvent',this.childNum); }
注意：
1、props是可以是字串陣列，也可以是物件（可以型別驗證、設定預設值等） ；
2、使用.native修飾監聽事件，開發中使用了element-ui 的框架標籤時候，使用事件繫結無效。這時候需要使用.native 修飾v-on:event ，可以在框架標籤或元件的根元素上監聽一個原生事件，例如
<my-component v-on:click.native="doTheThing"></my-component>