1.父子组件传值
vue2中的父子组件传值：
父组件：
<template>
<div class="parent">
<h2>父组件</h2>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
<Son1 :name="name" :age="age" @updateData="updateData"></Son1>
</div>
</template>
<script>
import Son1 from './Son1.vue'
export default {
name: "Parent",
data() {
return {
name:'张三',
age:20
}
},
methods: {
updateData(e){
this.name = e.myName
this.age = e.myAge
}
},
components:{
Son1
}
};
</script>
子组件：
<template>
<div class="son1">
<h2>Son1</h2>
<div>姓名：{{myName}}</div>
<div>年龄：{{myAge}}</div>
<div><button @click="updateData">修改数据</button></div>
</div>
</template>
<script>
export default {
name: "Son1",
props:["name","age"],
data() {
return {
myName:this.name,
myAge:this.age
}
},
methods: {
updateData(){
this.myName = '李四'
this.myAge = 30
this.$emit('updateData',{myName:this.myName,myAge:this.myAge})
}
},
};
</script>
vue3中的父子组件传值：
还是用props接收父组件的传值啊哈 props:["name","age"]
setup ( ) 的第一个参数，props，用于获取父组件的传值。
注意：props选项接收了几个参数，setup函数的第一个参数就只能获取几个参数。
setup ( ) 的第二个参数，context，是一个上下文对象，这个对象里面有emit，attrs，slots三个对象。
① emit，用于触发自定义事件。
② attrs，用于接收props选项没有接收的传值。
③ slots，返回的是插槽里面的虚拟DOM信息。
父组件：
<template>
<div class="parent">
<h2>父组件</h2>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
<div>性别：{{sex}}</div>
<Son1 :name="name" :age="age" :sex="sex" @updateData="updateData">
<!-- 这里是具名插槽 -->
<template v-slot:top>
<div class="box">这里是顶部</div>
<div class="box">
<button>这里是顶部</button>
</div>
</template>
<!-- #是v-slot: 的简写 -->
<template #bottom="scope">
<div class="box">这里是底部
<ul>
<li>{{scope.car.name}}</li>
<li>{{scope.car.price}}</li>
</ul>
</div>
</template>
</Son1>
</div>
</template>
<script>
import {ref} from 'vue'
import Son1 from './Son1.vue'
export default {
name: "Parent",
setup() {
let name = ref('张三')
let age = ref(20)
let sex = ref('男')
let updateData = (e)=>{
name.value = e.myName
age.value = e.myAge
sex.value = e.mySex
}
return{
name,
age,
sex,
updateData
}
},
components:{
Son1
}
};
</script>
子组件：
<template>
<div class="son1">
<!-- 定义具名插槽 -->
<slot name="top"></slot>
<h2>Son1</h2>
<div>姓名：{{myName}}</div>
<div>年龄：{{myAge}}</div>
<div>性别：{{mySex}}</div>
<div><button @click="updateData">修改数据</button></div>
<!-- 可以通过插槽传递一份数据给插槽的使用者，这样的插槽称为：作用域插槽 -->
<slot name="bottom" :car="car"></slot>
</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: "Son1",
// 接收父组件的传值
props:["name","age"],
// setup的第一个参数，用于获取父组件的传值
// 注意：props选项接收了几个参数，setup函数的第一个参数就只能获取几个参数。
// setup的第二个参数，context，是一个上下文对象，这个对象里面有attrs，emit，slots三个对象。
// 它里面一个方法emit，用于触发自定义事件。
// props选项没有接收的传值，在setup里面通过上下文对象的attrs属性接收。
setup(props,{emit,attrs,slots}) {
// slots对象返回的是插槽里面的虚拟DOM信息
// 什么是虚拟DOM，就是vue实例所能识别的一个DOM信息对象。
console.log(slots.top());
// console.log(attrs);
// console.log(context);
// console.log('son1',props);
// console.log(isReadonly(props));
// 中转props里面的数据，因为props是只读的。
let myName = ref(props.name)
let myAge = ref(props.age)
let mySex = ref(attrs.sex)
let car = reactive({
name:'奔驰',
price:20
})
let updateData = ()=>{
myName.value = '李四'
myAge.value = 30
mySex.value='女'
// 触发自定义事件
emit('updateData',{myName:myName.value,myAge:myAge.value,mySex:mySex.value})
}
return{
myName,
myAge,
mySex,
updateData,
car
}
}
};
</script>
