vue 组件之间通信
Posted ruthless
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 组件之间通信相关的知识，希望对你有一定的参考价值。
父传子
**父组件代码**
<template>
<header-box :title-txt="showTitleTxt"></header-box>
</template>
<script>
import Header from ‘./header‘
export default {
name: ‘index‘,
components: {
‘header-box‘: Header
},
data () {
return {
showTitleTxt: ‘首页‘
}
}
}
</script>
**子组件代码**
<template>
<header>
{{thisTitleTxt}}
</header>
</template>
<script>
export default {
name: ‘header-box‘,
props: {
titleTxt: String
},
data () {
return {
thisTitleTxt: this.titleTxt
}
}
}
</script>
子传父1
**子组件代码**
<template>
<header>
<button @click=‘anniu‘></button>
</header>
</template>
<script>
export default {
name: ‘header-box‘,
props: {
titleTxt: String
},
data () {
return {
}
},
methods: {
anniu(){
this.titleTxt(‘子组件传来的值‘)
},
},
} </script>
**父组件代码**
<template>
<header-box :title-txt="showTitleTxt"></header-box>
</template>
<script>
import Header from ‘./header‘
export default {
name: ‘index‘,
components: {
‘header-box‘: Header
},
data () {
return {
showTitleTxt: ‘首页‘
}
},
methods:{
showTitleTxt(a){
console.log(a) //子组件传来的值
},
}
}
</script>
子传父2
**子组件代码**
<template>
<button @click="incrementCounter">{{counter}}</button>
</template>
<script>
export default {
name: ‘button-counter‘,
data () {
return {
counter: 0
}
},
metheds: {
incrementCounter () {
this.$emit(‘increment‘,‘子组件传来的值‘)
this.counter++
}
}
}
</script>
*通过$on,$emit*
**父组件代码**
<template>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
import ButtonCounter from ‘./buttonCounter‘
export default {
name: ‘index‘,
components: {
‘button-conuter‘: ButtonCounter
},
data () {
return {
total: 0
}
},
methods: {
incrementTotal (a) {
console.log(a) //子组件传来的值
this.total++
}
}
}
</script>
以上是关于vue 组件之间通信的主要内容，如果未能解决你的问题，请参考以下文章