1.vue是如何進行父子組件之間的傳值的

? ?a.父子組件之間通過props

? ?b.子父組件之間通過$emit

2.簡單demo描述

? ?父組件包含一個點擊按鈕，用于改變子組件的顯示與隱藏；

? ?子組件只有一張圖片，以及通過點擊圖片改變父組件的button的值；

3.實現

? ?父組件

? ?

<template><div id="app"><Child :showtab="showtable" @ParentChange="ccc"/> <button @click="changetable">{{buttonval}}</button></div> </template><script> import Child from './components/Child'export default {name: 'App',components: {Child},data(){return{showtable:true,buttonval:"點擊改變"}},methods:{changetable(){this.showtable = !this.showtable;},ccc(data){this.buttonval = data;}} } </script>

?

? ?子組件

<template><div id="child" v-show="showtab"><div class="box"><img src="../../assets/settings.png" @click="changeparent"></div></div> </template><script>export default {name: "Child",props:{showtab:{ //父組件傳過來的值type:Boolean}},methods:{changeparent(){this.$emit("ParentChange","change"); //向父組件進行傳值}}} </script>

?

轉載于:https://www.cnblogs.com/Adver/p/9829316.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue父子组件之间的传值的全部內容，希望文章能夠幫你解決所遇到的問題。

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