溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vuejs中父子組件之間通信方法。分享給大家供大家參考，具體如下：
// Parent.vue
<template>
<div class="parent">
<v-child :msg="message"></v-child>
</div>
</template>
<script>
import VChild from './child.vue'
export default {
components: {
VChild
},
data () {
return {
// 父組件將message作為參數傳入子組件中
message: '來自父組件消息'
}
}
}
</script>
// Child.vue
<template>
<div class="child">
<h2>child</h2>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
// 通過props定義外部系統可以傳入的參數
// 定義了一個msg變量，類型是String,默認是空字符串
props: {
msg: {
type: String,
default: ""
}
}
}
</script>
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Parent from '@/test/Parent'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/parent',
component: Parent
}
]
})
// Parent.vue
<template>
<div class="parent">
<v-child :msg="message" @childNotify="childNotify"></v-child>
</div>
</template>
<script>
import VChild from './child.vue'
export default {
components: {
VChild
},
data () {
return {
// 父組件將message作為參數傳入子組件中
message: '來自父組件消息'
}
},
methods: {
childNotify (params) {
console.log(params)
}
}
}
</script>
// Child.vue
<template>
<div class="child" @click="notifyParent">
<h2>child</h2>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
// 通過props定義外部系統可以傳入的參數
// 定義了一個msg變量，類型是String,默認是空字符串
props: {
msg: {
type: String,
default: ""
}
},
methods: {
notifyParent () {
var params = {
m: 1,
n: 2
}
// 子組件以事件的形式通知父組件(需要使用$emit方法，第一個參數，事件名稱；第二個事件附帶的參數)
this.$emit('childNotify', params)
}
}
}
</script>
參考：https://jingyan.baidu.com/article/455a99505b639da1662778e1.html
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
