引用组件的三步骤：
- 1.路劲
import son from '@/components/son.vue' - 2.局部注册
components: {son: son}, - 3.引用
<son :content="content"></son>
父传子
创建父组件father.vue
注：v-bind(缩写 ：) 主要用于动态绑定属性
<template>
<div>
<div class="fontSize">
我是父组件
<!-- 在父组件里引用子组件并且将数据传递给子组件 -->
<son :content="content"></son>
</div>
</div>
</template>
<script>
import son from '@/components/son.vue'//子组件路劲
export default {
components: {//在compoents局部注册组件
son: son
},
data() {
return {
content: "儿子，最近在干嘛？"//在父组件声明一条数据
}
}
}
</script>
<style lang='scss' scoped>
</style>
创建子组件son.vue
<template>
<div class="son">
<div class="fontSize">
我是子组件
<p>父亲传过来的值：{{content}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props: ["content"]//子组件需要通过props接受父组件传递来的数据
}
</script>
<style lang='scss' scoped>
</style>
运行结果
子传父
- 父组件可以将自己方法传递给子组件来调用，实现子组件更改父组件的数据
创建父组件(father.vue)
<template>
<div>
<div class="fontSize">
我是父组件
<div>儿子传过来的值：{{messag}}</div>
<!-- 父组件调用子组件，并且给子组件绑定了一个自定义事件change -->
<son @change="changeFatherData" :content="content"></son>
</div>
</div>
</template>
<script>
import son from '@/components/son.vue'
export default {
components: {
son: son
},
data() {
return {
//在父组件声明数据
content: "儿子，最近在干嘛？",
messag: ""
}
},
methods: {
changeFatherData(datas) {//一个更改自身数据的方法（子组件调用可更改父组件的数据）
this.messag = datas
}
}
}
</script>
<style lang='scss' scoped>
</style>
创建子组件(son.vue)
<template>
<div class="son">
<div class="fontSize">
我是子组件
<p>父亲传过来的值：{{content}}</p>
<button class="fontSize" style="width: auto;" @click="changeEvent">点我给父亲发消息</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
message: "在学习，父亲最近可好？"
}
},
props: ["content"],//子组件需要通过props接受父组件传递来的数据
methods: {
//触发父组件changeFatherData方法从而改变父组件的值
changeEvent() {
//触发自身绑定的change方法<son @change="changeFatherData" :content="content"></son>
//this.$emit(自定义事件，参数)
this.$emit("change", this.message)
}
}
}
</script>
<style lang='scss' scoped>
</style>
