通常我们在获取子组件的数据和方法的操作
解决 ref 对子组件进行数据的获取以及方法的触发
不同 需要在子组件 通过defineExpose进行方法的，数据的 暴露
案例
父组件
<template>
<div>
<el-button @click="setValueOfName()"> 点击我进行数据的测试与更新 </el-button>
<el-button @click="setDog()"> 点击我进行数据的测试与更新 </el-button>
姓名： {{xm}}
<el-button>4444444</el-button>
<input v-model="xm">
<component :is="propvues" :name=name></component>
<propvues ref="getSonFunction" @sentValue = getavlue(event) :name=name >
<template v-slot:A = "peoperNmae">
<bution>{{peoperNmae.peoperNmae}}A</bution>
</template>
<template v-slot:B>
<bution>BJ</bution>
</template>
</propvues>
<button name="lllll" @click="getSon()"> jjjkkkkkk </button>
{{parent}}
</div>
<!-- <router- -->
{{injectvalue}}
</template>
<script setup lang="ts">
import axios from './axios/index'
import {ref,provide,onMounted,inject,watch,reactive,computed} from 'vue'
// const Provide =
const injectvalue = inject('names')
const getSonFunction = ref()
const peoper = ref<T>("人")
const myx = ref('张')
const mym = ref("三")
const xm = ref(computed(()=>{
return myx.value + mym.value
}))
const dog = reactive({
name:"旺财",
age:30,
sex:"男"
})
let parent = "法拉利"
let name = '张三洗头爱飘柔'
import HelloWorld from './components/HelloWorld.vue'
import propvues from './components/props.vue'
//通过自定义事件获取子组件的数据 子传递父亲
const getavlue = function(event){
console.log("event",event)
}
// dog
// watch(dog,(newValue,oldValue)=> {
// console.log(newValue)
// console.log(oldValue)
// },{
// deep:true,
// immediate:true,
// }
// )
watch(()=> dog.age ,(newValue,oldValue)=> {
console.log(newValue)
console.log(oldValue)
},{
deep:true,
immediate:true,
}
)
watch(peoper,(oldvalue,newValue)=> {
console.log(oldvalue,"oldvalue")
console.log(newValue,"newValue")
})
watch([peoper],(oldvalue,newValue)=> {
console.log(oldvalue,"oldvalue")
console.log(newValue,"newValue")
})
//
const setDog = function():void{
dog.age = 20
}
// dog
const setValueOfName = function(){
peoper.value ="ididiidppppppp"
}
const getUserName = function() {
axios({
url:'',
methods:'post',
data:{
name:"张",
value:'kdlvfl'
}
})
}
// 挂载完毕进行获取数据的请求
onMounted(()=>{
getUserName()
provide("parent",parent)
})
//通过ref获取子组件的数据 父亲传子
const getSon = function(){
console.log("开始获取父组件的事件")
console.log(getSonFunction.value.myserver,">>>>>>>")
getSonFunction.value.myserver()
}
</script>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
子组件
<template>
<slot name="A" :peoperNmae=peoperNmae></slot>
<slot name="B"></slot>
</template>
<script setup lang="ts">
import {inject,provide} from 'vue'
const $emit = defineEmits(['sentValue'])
const props = defineProps<{
name:{type:String}
}>()
const peoperNmae = "子组件的slot数据"
const getInject = inject('parent')
const names = 'llllllllhjhhjjjs'
provide('names',names)
const myserver = function(){
console.log("创建的事件被调用")
}
const sentValue = function(){
console.log("已经被触发创建当前事件")
// 第一个为创建事件的方法，第二个为传递事件的 参数
$emit('sentValue',)
}
// 父组件获取子组件的数据需要进行抛出才能获取
defineExpose({
myserver
})
</script>
