父组件向子组件传值
Son.vue
<template>
<div class="son" style="border:3px solid #000;margin:10px">
我是Son组件 {{title}}
</div>
</template>
<script>
export default {
name: 'Son-Child',
props:['title']
}
</script>
<style>
</style>
App.vue (father)
<template>
<div class="app" style="border: 3px solid #000; margin: 10px">
我是APP组件
<Son :title="myTitle"></Son>
</div>
</template>
<script>
import Son from './components/Son.vue'
export default {
name: 'App',
data() {
return {
myTitle: '学前端',
}
},
components: {
Son,
},
}
</script>
<style>
</style>
子组件想父组件传值
Son.vue
<template>
<div class="son" style="border: 3px solid #000; margin: 10px">
我是Son组件 {{ title }}
<button @click="changeFn">修改title</button>
</div>
</template>
<script>
export default {
name: 'Son-Child',
props: ['title'],
methods: {
changeFn() {
this.$emit('changTitle','无羡')
},
},
}
</script>
<style>
</style>
App.vue (father)
<template>
<div class="app" style="border: 3px solid #000; margin: 10px">
我是APP组件
<Son :title="myTitle" @changTitle="handleChange"></Son>
</div>
</template>
<script>
import Son from './components/Son.vue'
export default {
name: 'App',
data() {
return {
myTitle: '学前端',
}
},
components: {
Son,
},
methods: {
handleChange(newTitle) {
this.myTitle = newTitle
},
},
}
</script>
<style>
</style>