一,父子组件传参:
应用场景:父子组件传参
Vue3碎片:defineEmits,defineProps,ref,reactive,onMounted
1.父组件传子组件
a.父组件传参子组件
import { ref} from 'vue'
import OnChild from './onChild.vue'
const toGive=ref("apple");
<OnChild :getGive="toGive" />
b.子组件获取
import { onMounted} from 'vue'
const getFruit=defineProps({
getGive:String
})
onMounted(()=>{
console.log("子组件获得",getFruit.getGive)
})
2.子组件传父组件
a,子组件
import { reactive} from 'vue'
const playList=reactive({ name:"路人甲"})
playList.type="乒乓球🏓!";
const emit= defineEmits(['toList']);
const pass=()=>{
playList.status="发送了一个"
emit('toList',playList)
}
b,父组件获取
import { reactive} from 'vue'
import OnChild from './onChild.vue'
const getList= reactive({});
<OnChild @toList="getListArr"/>
const getListArr=(value)=>{
// getList.value=value
getList.value = { ...Object.assign({}, value)}
console.log("接收一个",getList.value);
}
c,父组件更新子组件传送信息
const updateInfo=(()=>{
toGive.value="orange";
console.log("传给子组件一个",toGive.value);
})
3.效果图
简单使用,总结至此,欢迎各位工友交流学习。
传送门:
1.Vue3中provide,inject使用
2.Vue3中使用自定义指令
3.Vue3中动态组件使用