vue之prop,emit資料傳遞示例
parent.vue
<template>
<div>
父親: {{childInfo}}
<child :parentInfo="parentMsg" @childInfo="handleChildMsg"/>
</div>
</template>
<script>
import child from "./ccc"
export default {
name: "parent",
components: {
child
},
data() {
return {
parentMsg: "來自父親的話",
childInfo: ""
}
},
methods: {
handleChildMsg(data) {
this.childInfo = data;
}
},
}
</script>
<style scoped>
</style>
child.vue
<template>
<div>
兒子:{{parentInfo}}
<button @click="sendMsg">給父親傳送訊息</button>
</div>
</template>
<script>
export default {
name: "child",
data() {
return {
childInfo: "兒子發來的訊息"
}
},
// props: {//子接收資料
// parentInfo: {
// type: String,
// default: ""
// }
// },
props: ["parentInfo"],//子接收資料(簡寫)
methods: {
sendMsg() {
this.$emit("childInfo", this.childInfo);
}
},
}
</script>
<style scoped>
</style>
相關文章
- vue中子元件傳遞父元件$emitVue元件MIT
- vue元件之間的資料傳遞Vue元件
- VUE 傳遞資料Vue
- Vue.js 元件之間傳遞資料Vue.js元件
- Vue元件間傳遞資料Vue元件
- Vue父子元件通過prop非同步傳輸資料踩坑Vue元件非同步
- 頁面之間傳遞資料
- Vue 單檔案中的資料傳遞Vue
- Vue 父子元件資料傳遞( inheritAttrs + $attrs + $listeners)Vue元件
- vue2父子組建傳遞資料Vue
- Vue元件之間的資料傳遞(通訊、互動)詳解Vue元件
- Vue父子之間的值傳遞Vue
- mock axios vue的資料傳遞關係MockiOSVue
- 淺談Vue元件傳遞資料與通訊Vue元件
- Vue 全站快取之 vue-router-then :前後頁資料傳遞Vue快取
- HarmonyOS-基礎之元件資料傳遞元件
- 淺入深出Vue:子元件與資料傳遞Vue元件
- vue資料傳遞–我有特殊的實現技巧Vue
- postman(五):在不同介面之間傳遞資料Postman
- react元件與元件之間的資料傳遞React元件
- bundle實現Activity之間的資料傳遞
- 不同順序InBoundHandler之間的資料傳遞
- vue中$emit與$onVueMIT
- chan中傳遞map資料,傳遞的是引用
- vue---Prop使用Vue
- 向上向下傳遞資料
- Vue 子元件和父元件傳遞資料與方法的例子Vue元件
- Vue學習小札——2.4 父子元件間的資料傳遞Vue元件
- Flutter學習之Route跳轉及資料傳遞Flutter
- 微信小程式父子元件之間的資料傳遞微信小程式元件
- vue 父子元件傳值報錯:this.$emit is not a function 解決Vue元件MITFunction
- Flutter 中的資料傳遞Flutter
- 父子元件的資料傳遞元件
- 返回Acitivity時傳遞資料
- vue---元件間傳遞訊息(父子傳遞訊息,兄弟傳遞訊息)Vue元件
- Vue : props 使用細節(父元件傳遞資料給子元件)Vue元件
- Vue元件之props,$emit與$on以及slot分發Vue元件MIT
- 深入解析React資料傳遞之元件內部通訊React元件