vue2.0父子組件間傳遞數據的方法
更新時間：2018年08月16日 09:59:06 作者：5649498
本文通過一個小例子給大家介紹了vue2.0父子組件間傳遞數據的方法，需要的朋友參考下吧
關于父子組件之間傳遞數據其實文檔上都說得很明白。
但是如果完全不懂的人做計也看不懂，下面是一個小例子，有兩個文件
1.parent.vue
<template>
<child :child-msg="msg" @ok="event"></child>
</template>
<script>
import child from './child.vue';
export default {
data(){
return{
msg:'hello worldgogo'
}
},
components:{
child
},
methods:{
event(val){
console.log(val);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
2.child.vue
<template>
<p>{{childMsghello}}</p>
</template>
<script>
export default {
props: ['childMsg'],
data(){
return{
childMsghello:this.childMsg+'this is child'
}
},
created(){
//自定義事件，并且給監(jiān)聽此事件的回調函數的值設為200
this.$emit('ok','200');
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
總結
以上所述是小編給大家介紹的vue2.0父子組件間傳遞數據的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了vue微信分享鏈接添加動態(tài)參數的實現方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
很多時候我們在操作過頁面時候，特別是增刪改操作之后，數據會有所改變，本文主要介紹了Vue實現父子組件頁面刷新的幾種常用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
最近運行vue項目的時候報錯了,通過查找相關資料最終解決,下面這篇文章主要給大家介紹了關于vue運行報錯cache-loader的解決步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue修改swiper框架輪播圖小圓點的樣式不起作用的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
隨著前端技術的發(fā)展,TypeScript 已經成為了許多開發(fā)者的首選語言之一,因為它提供了靜態(tài)類型檢查,可以幫助開發(fā)者在編寫代碼階段就發(fā)現錯誤,本文將詳細介紹如何在 Vue 3 中配置 TypeScript,需要的朋友可以參考下2024-10-10
關于vue-admin-element中的動態(tài)加載路由
這篇文章主要介紹了關于vue-admin-element的動態(tài)加載路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue項目中使用自定義字體樣式方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實現調節(jié)窗口大小時觸發(fā)事件動態(tài)調節(jié)更新組件尺寸的方法
今天小編就為大家分享一篇Vue實現調節(jié)窗口大小時觸發(fā)事件動態(tài)調節(jié)更新組件尺寸的方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue實現的網易云音樂在線播放和下載功能,結合具體實例形式分析了網易云音樂相關接口調用與操作技巧,需要的朋友可以參考下2019-02-02
在 vuejs 相關項目開發(fā)過程中，我們常常會使用 vuex 作為狀態(tài)管理工具, 整個組件的狀態(tài)做為單向數據流的模式管理，這篇文章主要介紹了簡化vuex的狀態(tài)管理方案的方法，感興趣的小伙伴們可以參考一下2018-06-06