祖孙组件间传值
Vue3中的祖孙组件间的传值:
①父组件通过使用provide（）方法，定义依赖数据。
proviede(名称，传输的数据名)记得返回出去
②子组件通过inject接收：let xx=inject(名称)
③修改的话直接通过事件.value修改数据，比起Vue2修改值少了转换和发送自定义事件步骤
Vue2的祖孙组件间的传值
①父组件通过provide(）{return{name:this.name}}函数定义依赖数据
②子组件通过inject:[]接收父组件传递参数
③修改值要写方法，只有父级变了它才会变。所以给父级定义个方法，再通过provide()依赖传递(不仅可以依赖数据，还可以依赖方法)，在子孙组件方法中调用父级定义的方法并传实参过去。
父组件
<template>
<div class="son">
<h2>Son1</h2>
<ul>
<li>车名：{{carName}}</li>
<li>车价：{{carPrice}}</li>
</ul>
<SubSon/>
</div>
</template>
<script>
import {inject} from 'vue'
import SubSon from "./SubSon.vue";
export default {
name: "Son",
setup() {
let carName = inject('carName')
let carPrice = inject('carPrice')
return{
carName,
carPrice
}
},
components: {
SubSon,
}，
data() {
return {
name:'张三',
age:20
}
},
Vue2中的祖孙组件传递数据并更改数据
// 定义依赖数据
provide(){
return{
name:this.name,
age:this.age,
updateData:this.updateData
}
},
methods: {
// 定义修改数据方法
updateDate(name,age){
this.name=name
this.age=age
}
},
};
子孙组件
<template>
<div class="subSon">
<h2>SubSon</h2>
<ul>
<li>姓名：{{name}}</li>
<li>年龄：{{age}}</li>
<li>
<button @click="update">修改信息</button>
</li>
</ul>
</div>
</template>
<script>
import {inject} from 'vue'
export default {
name: "SubSon",
setup() {
//inject()方法，用于注入父级中依赖的数据
let name = inject('name')
let age = inject('age')
let update = ()=>{
name.value = '李四'
age.value = 30
}
return {
name,
age,
update
}
}
Vue2中的祖孙组件传递数据并更改数据
inject:['name','age','updatedate'],
data() {
return {
myName:this.name,
myAge:this.age
}
},
methods: {
update(){
// 修改自己
this.myName='李四'
this.myAge='20'
// 修改父级
this.updateData('李四',30)
}
},
};
</script>
兄弟组件传值
Vue2中Vue是个构造函数，所以兄弟组件传值，用中央事件总线，给vue的实例添加数据。
而在Vue3中Vue是个对象，所以无法再使用给实例添加数据的方式。我们可以把数据都给父级再去修改。
注意：在Vue3中不使用的数据就不需要返回
Vue3的兄弟组件传值 数据提升的方式
①在共同的父级定义数据和方法。父级通过provide（子级接收名，传递的值）方法设置为依赖数据
②子级在inject（子级接收名）方法中接收数据，页面中直接使用，记得return
③另一个子组件在inject()方法中接收修改数据的方法，并绑定点击事件
父级
<template>
<div class="app">
<h2>App</h2>
<ul>
<li>姓名：{{name}}</li>
<li>年龄：{{age}}</li>
</ul>
<ul>
<li>飞机名称：{{planeName}}</li>
<li>飞机价格：{{planePrice}}</li>
<li>飞机产地：{{planeAddress}}</li>
</ul>
<!-- suspense内置组件，用于在渲染异步组件时，添加Loading效果 -->
<!-- 注意：
1.异步组件可以不使用suspense组件，但是会失去异步的作用
2.如果组件中setup的返回值是一个Promise对象，那么该组件在导入时，必须采用异步方式导入;
并且该组件必须要使用suspense组件-->
<suspense>
<!-- default插槽里面放置异步组件 -->
<template #default>
<Son4/>
</template>
<!-- fallback插槽里面放置组件没有加载完成时显示的内容 -->
<template #fallback>
Loading...
</template>
</suspense>
<Son/>
<Son2/>
<!-- 在vue3中子定义组件时，v-model可以使用多次，实现对多个数据的双向绑定，
注意：vue3取消了sync修饰符，它将v-model指令和sync修饰符进行了合并。 -->
<Son3 v-model:planeName="planeName"
v-model:planePrice="planePrice" v-model:planeAddress="planeAddress" />
</div>
</template>
<script>
import {ref,provide,defineAsyncComponent} from 'vue'
import Son from './components/Son.vue'
import Son2 from './components/Son2.vue'
import Son3 from './components/Son3.vue'
// defineAsyncComponent组合式API，用于定义异步组件
// 异步导入组件
const Son4 = defineAsyncComponent(()=>import('./components/Son4.vue'))
export default {
name: 'App',
setup() {
let name = ref('张三')
let age = ref(20)
let carName = ref('保时捷')
let carPrice = ref(100)
let updateCar = (name,price)=>{
carName.value = name
carPrice.value = price
}
//通过provide()方法，定义依赖数据，从此它的子组件，就可以获取这些数据了
provide('name',name)
provide('age',age)
provide('carName',carName)
provide('carPrice',carPrice)
provide('updateCar',updateCar)
//定义飞机的相关数据
let planeName = ref('波音747')
let planePrice = ref(100)
let planeAddress = ref('美国')
return {
name,
age,
//返回飞机相关信息
planeName,
planePrice,
planeAddress
}
},
components: {
Son,
Son2,
Son3,
Son4
}
/* data() {
return {
name:'张三',
age:20
}
},
methods: {
//修改数据的方法
updateData(name,age){
this.name = name
this.age = age
}
},
//定义依赖数据
provide(){
return {
name:this.name,
age:this.age,
updateData:this.updateData
}
}, */
}
</script>
子级
<template>
<div class="son2">
<h2>Son2</h2>
<button @click="updateCar">修改汽车信息</button>
</div>
</template>
<script>
import {inject} from 'vue'
export default {
name: "Son2",
setup() {
let updateCar = inject('updateCar')
let update=()=> {
updateCar('奔奔车',1000)
}
}
};
</script>
Vue2和Vue3中的自定义组件
Vue2中
①父级给子组件绑定属性为:value=xx,绑定事件为@input=xx，就可以使用语法糖sync:属性=xx，
②子级通过props接收的值，可直接在页面中使用
③子级修改父级数据自定义事件$emit('update:属性'，修改的值)
Vue3中
①父级给子组件绑定属性为:value=xx，绑定事件为@input=xx,就可以使用语法糖v-model:属性=xx，
②子级通过props接收的值可直接在页面使用（父级必须把数据return出去，子级才可使用）。
③子级要修改接收的父级数据，直接通过setup()中第二个参数context的emit方法。emit('update:属性'，修改的值)
<div class="son3">
<h2>Son3</h2>
<ul>
<li>飞机名称：{{planeName}}</li>
<li>飞机价格：{{planePrice}}</li>
<li>飞机地址：{{planeAddress}}</li>
<li><button @click="updatePlaneName">修改飞机名称</button></li>
<li><button @click="updatePlanePrice">修改飞机价格</button></li>
<li><button @click="updatePlaneAddress">修改飞机产地</button></li>
</ul>
</div>
</template>
<script>
export default {
name:'Son3',
props:['planeName',"planePrice","planeAddress"],
setup(props,{emit}) {
let updatePlaneName=()=>{
// planeName.value="长城1号" //改自己的名称
// console.log(planeName);
// 事件方法必须是uptate:prop(属性)，如果父组件中采用的是v-model
// 此时父组件就可以实现对prop的双向数据绑定
emit('update:planeName','长城1号')
}
let updatePlaneAddress=()=>{
// planeAddress.value="中国" //改自己的名称
emit('update:planeAddress','中国')
}
let updatePlanePrice=()=>{
// planePrice.value=1000 //改自己的名称
emit('update:planePrice',1000)
}
return{
updatePlanePrice,
updatePlaneAddress,
updatePlaneName
}
}
}
