一、父子组件之间的传值:
1、父子组件之间的传值:
1.1、父组件向子组件传值:子组件通过props属性获取父组件中的值
(1)、在父组件中使用子组件时,需要通过v-bind指令绑定一个属性
(2)、在子组件中通过props属性,来获取父组件中v-bind指令绑定的那个属性
举例:
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-type: none;
}
</style>
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>
App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Father from "./components/Father.vue";
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<Father/>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
1.2、子组件向父组件传值:通过触发事件的方式传递(使用$emit触发自定义的事件)
举例:
SonOne.vue代码段:
<template>
<h2 @click="changeTitle">{{ title }}</h2>
</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>
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>
App.vue:
import FatherOne from "./components/FatherOne.vue";
<FatherOne/>
单击前:
单击后:
1.3、在组合式API(setup)中使用this
(1)、this:代表当前的组件
(2)、在Vue3的setup中没有this,但是有proxy,作用与this的作用相同,获取proxy的方法:
第一步:从vue中导入方法:getCurrentInstance
import { getCurrentInstance } from ‘vue’;
第二步:从getCurrentInstance方法中获取proxy
const { proxy } = getCurrentInstance();
(3)、强调:
A、setup中没有this,可以使用proxy,其作用与this相同
B、在setup中定义普通变量,建议使用ref进行初始化。改变用ref初始化的变量的值,采用的方法,变量名.value = '新值'
C、在setup中定义普通对象,建议使用reactive进行初始化,const obj = reactive({})
二、跨级组件之间的通信
使用provide / inject方法,provide发送数据,inject接收数据
1、provide( name,value )
name:是属性名
value:属性值
2、inject(name,default)
name:是属性名。必须和provide的属性名相同
default:可选参数
演示:
Grandson.vue代码段:
<template>
<h2>孙子:朱瞻基</h2>
<div>爷爷:{{ getYeYeData }}</div>
</template>
<script>
import { inject } from 'vue';
export default {
name: "Grandson",
setup(){
let getYeYeData = inject('giveLastWords')
return{
getYeYeData
}
}
}
</script>
<style scoped>
</style>
SonTwo.vue代码段:
<template>
<h2>儿子:朱高炽</h2>
<div>父亲:{{getPapaData}}</div>
<hr/>
<Grandson/>
</template>
<script>
import {inject} from "vue";
import Grandson from "./Grandson.vue";
export default {
name: "SonTwo",
components:{
Grandson
},
setup(){
let getPapaData=inject('giveLastWords')
return{
getPapaData
}
}
}
</script>
<style scoped>
</style>
Grandpa.vue代码段:
<template>
<h2>朱棣:{{lastWords}}</h2>
<hr/>
<SonTwo/>
</template>
<script>
import {inject, provide} from "vue";
import SonTwo from "./SonTwo.vue";
export default {
name: "GrandPa",
components: {SonTwo},
setup(){
let lastWords='抗击元蒙,修订永乐大典'
provide('giveLastWords',lastWords)
return{
lastWords
}
}
}
</script>
<style scoped>
</style>
App.vue代码段:
import Grandpa from "./components/Grandpa.vue";
<Grandpa/>