一往史,父組件傳值給子組件
父組件
<template>
<children :childrenVal='parentVal'></children>
</template>
<script>
import children from "@/components/children"
export default {
data(){
return {
parentVal:'我是父組件的值'
}
},
components:{
children
}
}
</script>
子組件
<template>
</template>
<script>
export default {
props:['childrenVal']
}
</script>
在父組件引用子組件的標(biāo)簽中用:(v-bind)自定義屬性,將父組件的值傳到子組件中,在子組件中莽鸿,用props接收父組件傳過來的值。
二拾给, 子組件傳值給父組件
子組件里面是一個按鈕祥得,里面定義一個點擊事件@click=‘children’,點擊按鈕觸發(fā)children方法,在方法里用this.$emit('children',傳的值)
<template>
<button @click="children"></button>
</template>
<script>
export default {
data(){
return {
message:'我是子組件的信息'
}
},
methods:{
children(){
this.$emit('children',this.message)
}
}
}
</script>
在父組件中鸣戴,用v-on定義children事件啃沪,當(dāng)在子組件的children被執(zhí)行時,父組件中的parent的方法就會被執(zhí)行
<template>
<button @click="children"></button>
</template>
<script>
export default {
data(){
return {
message:'我是子組件的信息'
}
},
methods:{
children(){
this.$emit('children',this.message)
}
}
}
</script>