一、组件之间的关系:
1、父子组件之间的传值:
(1)父组件向子组件传值:子组件通过props属性获取父组件中的值
a、在父组件中使用子组件时,需要通过v-bind指令绑定一个属性
b、在子组件中通过props属性,来获取父组件中v-bind指令绑定的那个属性
☀️举个例子:
Father.vue代码段:
<template>
<Son v-bind:users="arr"/>
</template>
<script>
import Son from "./Son.vue";
export default {
name: "Father",
setup(){
const arr = ['大雁塔','小雁塔','兵马俑','大唐芙蓉园','乾陵']
return {
arr
}
},
components:{
Son
}
}
</script>
<style scoped>
</style>
Son.vue代码段:
<template>
<ul>
<li v-for = "(user,index) in users" v-bind:key="index">
{{ user }}
</li>
</ul>
</template>
<script>
export default {
name: "Son",
props:{
users:{
type:Array,
required:true
}
}
}
</script>
<style scoped>
li{
list-style-position: inside;
}
</style>
App.vue代码:
import Father from "./components/Father.vue"
<Father/>
(2)子组件向父组件传值:通过触发事件的方式传递(使用$emit触发自定义的事件)
☀️举个例子:
FatherOne.vue代码段:
<template>
<SonOne v-on:updateTitle="modifyTitle"/>
<h1>{{ title }}</h1>
</template>
<script>
import { ref } from 'vue';
import SonOne from "./SonOne.vue";
export default {
name: "FatherOne",
components: {
SonOne
},
setup(){
let title = ref('我是父组件,用来接收子组件的值')
function modifyTitle(info){
title.value = info
}
return {
title,
modifyTitle
}
}
}
</script>
<style scoped>
</style>
SonOne.vue代码段:
<template>
<h1 @click="changeTitle">{{ title }}</h1>
</template>
<script>
import {ref,getCurrentInstance} from "vue";
export default {
name: "SonOne",
setup(){
let title = ref("我是子组件,单机我,传值给父组件")
const { proxy } = getCurrentInstance()
function changeTitle(){
proxy.$emit('updateTitle','西安邮电大学')
}
return{
title,
changeTitle
}
}
}
</script>
<style scoped>
</style>
App.vue代码段:
import FatherOne from "./components/FatherOne.vue";
<FatherOne/>
(3)在组合式API(setup)中使用this所出现的问题(子传父)
A、this:代表当前的组件(Vue2)
B、在Vue3的setup中没有this,但是有proxy,作用与this的作用相同
获取proxy的方法
第一步:从vue中导入方法:getCurrentInstance
import { getCurrentInstance } from ‘vue’;
第二步:从getCurrentInstance方法中获取proxy
const { proxy } = getCurrentInstance()
C、强调:
①setup中没有this,可以使用proxy,其作用与this相同
②在setup中定义普通变量,建议使用ref进行初始化。改变用ref初始化的变量的值,采用的方法
变量名.value = ‘新值’
③在setup中定义普通对象,建议使用reactive进行初始化
const obj = reactive({})
2、兄弟组件之间的传值:
兄弟组件之间的传值:使用mitt第三方库
1、创建事件中心:创建事件触发器并导出
event.js代码段:
//创建事件中心
import mitt from 'mitt'; //导入mitt
const emitter = mitt() //创建事件触发器
export default emitter;//导出事件触发器
2、兄弟组件定义接收数据方法:对指定事件进行监听
3、兄弟组件定义发送数据方法:触发对方监听的事件并发送数据
Brother1.vue代码段:
<template>
<div class = "Brother1">
<h2>兄弟 --- 关羽</h2>
<p>{{ data1 }} {{ data2 }}</p>
<button @click="sendData">将美酒送给三弟</button>
</div>
</template>
<script>
//导入事件中心的事件触发器
import emitter from '../event/event'
export default {
name: "Brother1",
data(){
return{
data1:'美酒',
data2:''
}
},
methods:{
//接收数据的方法
receive: function(){
//通过事件触发器来监视“two-to-one"事件是否被触发,若被触发则接收触发该事件的组件传递的组件
emitter.on('two-to-one',(data)=>{
this.data2 = data
})
},
sendData:function(){
//触发指定事件,将数据传递给对应的事件
emitter.emit('one-to-two',this.data)
}
},
mounted(){//表示组件挂在完成,只要组件挂载完成mounted下的代码就立即执行
this.receive();
}
}
</script>
<style scoped>
.Brother1{
color: blueviolet;
font-size: 20px;
border: 1px solid #bbb;
margin-bottom: 10px;
}
</style>
Brother2.vue代码段:
<template>
<div class = "Brother2">
<h2>兄弟 --- 张飞</h2>
<p>{{ data1 }} {{ data2 }}</p>
<button @click="sendData">将宝剑送给二哥</button>
</div>
</template>
<script>
//导入事件中心的事件触发器
import emitter from '../event/event'
export default {
name: "Brother2",
data(){
return{
data1:'宝剑',
data2:''
}
},
methods:{
// 监听one-to-two事件,接收数据
receive:function(){
emitter.on('one-to-two',(data)=>{
this.data2 =data
})
},
sendData(){//发送数据,触发”two-to-one‘事件
//触发指定事件,将数据传递给对应的事件
emitter.emit('two-to-one',this.data)
}
},
mounted(){//表示组件挂在完成,只要组件挂载完成mounted下的代码就立即执行
this.receive();
}
}
</script>
<style scoped>
.Brother2{
color: yellowgreen;
font-size: 20px;
border: 1px solid #ccc;
}
</style>
App.vue代码段:
import Brother1 from "./components/Brother1.vue";
import Brother2 from "./components/Brother2.vue";
<Brother1/>
<Brother2/>
3、跨级组件之间的通信:
跨级组件之间的通信:使用provide / inject方法,provide发送数据,inject接收数据
1、provide( name,value )
name:是属性名
value:属性值
2、inject(name,default)
name:是属性名。必须和provide的属性名相同
default:可选参数
☀️举个例子:
KangXi.vue代码段:(爷爷)
<template>
<h2>康熙:{{ lastWords}}</h2>
<hr/>
<YongZheng/>
</template>
<script>
import { provide } from 'vue';
import YongZheng from './YongZheng.vue'
export default {
name: "KangXi",
components:{
YongZheng
},
setup(){
let lastWords = '整顿吏治'
provide('giveLastWords',lastWords)
return{
lastWords
}
}
}
</script>
<style scoped>
</style>
YongZheng.vue代码段:(儿子)
<template>
<h2>儿子:雍正</h2>
<div>父亲: {{ getFatherData }}</div>
<hr/>
<QianLong/>
</template>
<script>
import { inject } from 'vue';
import QianLong from "./QianLong.vue";
export default {
name: "YongZheng",
components: {
QianLong
},
setup(){
let getFatherData = inject('giveLastWords')
return {
getFatherData
}
}
}
</script>
<style scoped>
</style>
QianLong.vue代码段:(孙子)
<template>
<div>
<h2>孙子:乾隆</h2>
<div>爷爷:{{ getYeYeData }}</div>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
name: "QianLong",
setup(){
let getYeYeData = inject('giveLastWords')
return {
getYeYeData
}
}
}
</script>
<style scoped>
</style>
App.vue代码段:
import KangXi from "./components/KangXi.vue";
<KangXi/>