坚持、坚持、再坚持！
努力、努力、再努力！
今天把Vue3更完
关键字：父子组件传值、
1. 父子组件传值
父
<Son1 :name="name" :age="age" :sex="sex"
@updateName="name=$event" @updateAge="age=$event" @updateSex="sex=$event">
<!-- 通过template组件指定具体的插槽 -->
<template v-slot:one>
<div>
<button>按钮1</button>
</div>
<p>HelloWorld</p>
</template>
<!-- #是v-slot:的简写 -->
<template #two>
<div>
<button>按钮2</button>
</div>
<p>你好世界</p>
</template>
</Son1>
子
<h2>Son1</h2>
<div>
姓名：{{myName}}
年龄：{{myAge}}
性别：{{mySex}}
<button @click="updateData">修改信息</button>
</div>
<!-- 插槽，定义多个插槽时，需要给插槽定义名称：具名插槽 -->
<slot name="one"></slot>
<slot name="two"></slot>
<GrandSon1 />
import { ref } from 'vue';
import GrandSon1 from './GrandSon1.vue'
export default {
name: "Son1",
components:{
GrandSon1
},
// 接收父组件传过来的数据
props:['name','age'],
// Vue2中的方式
/* data() {
return {
myName:this.name,
myAge:this.age,
mySex:this.sex
}
},
methods: {
updateData(){
this.myName = '李四'
this.myAge = 30
this.mySex = '女'
this.$emit('updateName',this.myName)
this.$emit('updateAge',this.myAge)
this.$emit('updateSex',this.mySex)
}
}, */
//setup函数中通过参数props接收父组件传递进来的参数
//注意：props参数中，只会接收props选项中接收的参数
//context参数里面有三个对象：attrs，emit，slots
//attrs用于获取没有采用props选项接收的参数
//emit用于触发自定义事件
//slots用于获取插槽信息
setup(props,{attrs,emit,slots}) {
//slots对象返回的是插槽里面所有内容的虚拟DOM
console.log(slots.one()[0].children);
//获取姓名和年龄
let myName = ref(props.name)
let myAge = ref(props.age)
//获取性别
let mySex = ref(attrs.sex)
//修改数据的方法
let updateData = ()=>{
//修改自身数据
myName.value = '李四'
myAge.value = 30,
mySex.value = '女'
//触发自定义事件，将最新数据回传给父组件
emit('updateName',myName.value)
emit('updateAge',myAge.value)
emit('updateSex',mySex.value)
}
return{
myName,
myAge,
mySex,
updateData
}
}
};
2. 祖孙组件传值
祖
import {reactive, provide} from 'vue'
let phone = reactive({
name:'华为',
price:5000
})
//provide将指定的数据添加为依赖数据，让后代组件可以直接使用
provide('phone',phone)
孙
<h3>GrandSon1</h3>
<div>
手机信息：{{phone}}
<button @click="updatePhone">修改手机</button>
</div>
import {inject} from 'vue'
// inject注入祖级组件中设置为依赖的数据
let phone = inject('phone')
let updatePhone = ()=>{
phone.name = '苹果'
phone.price = 8000
}
return {
phone,
updatePhone,
}
3. v-model
父
<!-- Vue3可以通过v-model指令实现对多个数据的双向绑定 -->
<Son2 v-model:name="name" v-model:age="age" v-model:sex="sex"
@click="testClick" />
子
<h2>Son2</h2>
<div>
姓名：{{myName}}
年龄：{{myAge}}
性别：{{mySex}}
<button @click="updateData">修改信息</button>
<button @click="emitClick">触发一个click事件</button>
</div>
let testClick = (e)=>{
alert(e)
}
import { ref } from 'vue';
export default {
name: "Son2",
//props选项接收父组件参数
props:['name','age','sex'],
//emits选项确定父组件可以触发哪些事件
//注意：因为click跟原生事件同名，如果不在emits里面配置的话，父组件会触发两次click事件
emits:['click'],
setup(props,{emit}) {
let myName = ref(props.name)
let myAge = ref(props.age)
let mySex = ref(props.sex)
let updateData = ()=>{
myName.value = '谢娜'
myAge.value = 35,
mySex.value = '女'
//注意：自定义事件名称必须命名为update:属性名
//就可以实现对父组件中指定属性的双向绑定
emit('update:name',myName.value)
emit('update:age',myAge.value)
emit('update:sex',mySex.value)
}
let emitClick = ()=>{
//触发一个click事件
emit('click','哈哈')
}
return{
myName,
myAge,
mySex,
updateData,
emitClick
}
}
};
4.异步组件
定义
<h2>Son3</h2>
<div>姓名：{{name}}，年龄：{{age}}</div>
import {ref} from 'vue'
export default {
name: "Son3",
setup() {
let name = ref('周杰伦')
let age = ref(20)
//注意：通常情况下，setup方法直接返回对象，不要返回Promise对象。
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve({
name,
age
})
}, 2000);
})
}
使用
<!-- suspense用于在渲染异步组件时，显示Loading... -->
<!-- 注意：异步加载的组件可以用suspense，也可以不用；
但是，如果组件中setup的返回值是一个Promise对象，该组件必须要用suspense -->
<suspense>
<template #default>
<Son3/>
</template>
<template #fallback>
Loading...
</template>
</suspense>
// defineAsyncComponent组合式API，用于定义异步组件
import {defineAsyncComponent} from 'vue'
// 异步导入组件
let Son3 = defineAsyncComponent(()=>import('./components/Son3.vue'))
5. teleport组件
官方起的名称：瞬移。通过to属性确定里面的元素移动到哪
<h2>Son4</h2>
<button @click="show=true">弹出</button>
<!-- teleport组件：官方起的名称：瞬移。通过to属性确定里面的元素移动到哪 -->
<teleport to="body">
<div v-show="show" class="box">
<button @click="show=false">关闭</button>
</div>
</teleport>
网友评论