父组件：
<template>
<div id="father">
{{ '我是父组件,名称是' + componentName }}
<son :changeComponentName = "changeComponentName"></son>
</div>
</template>
<script>
import son from './son.vue'
export default {
data: function () {
return {
componentName: '组件A'
}
},
methods: {
changeComponentName: function (newComponentName) {
this.componentName = newComponentName
}
},
components: {
son: son
}
}
</script>
<style scoped>
#father div{
padding: 10px;
margin: 10px;
border: 1px solid gray;
}
</style> 子组件：
<template>
<div>
<p>我是子组件：一个button</p>
<button @click="() => changeComponentName(newComponentName)">
把父组件的名称修改为：彭湖湾的组件
</button>
</div>
</template>
<script>
export default {
data: function () {
return {
newComponentName: '彭湖湾的组件'
}
},
props: {
changeComponentName: {
type: Function,
default: () => { }
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>demo:
点击前：
点击后：
图解：
点击子组件（按钮）的时候，将父组件的名称从“A”修改为“彭湖湾的组件”
我们从父组件向子组件传递了一个函数（changeComponentName）。并在子组件调用这个函数的时候，以参数的形式传递了一个子组件内部的数据（newComponentName）给这个函数，这样，在父组件中定义的函数（changeComponentName）就可以取得子组件传来的参数了
【PS】 命名太长不好意思
子组件传递数据给父组件 方式二：自定义事件
父组件：
<template>
<div id="father">
<div>
{{ '我是父组件,我的名称是:' + fatherComponentName }}
