·?父組件向子組件傳遞參數

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>

?

?

?

總結

以上是生活随笔為你收集整理的VUE中父子组件传参（简单明了）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。