通常我們?cè)讷@取子組件的數(shù)據(jù)和方法的操作

解決??ref 對(duì)子組件進(jìn)行數(shù)據(jù)的獲取以及方法的觸發(fā)

不同? 需要在子組件 通過(guò)defineExpose進(jìn)行方法的，數(shù)據(jù)的 暴露

案例?

?父組件

<template>
  <div>
    <el-button @click="setValueOfName()"> 點(diǎn)擊我進(jìn)行數(shù)據(jù)的測(cè)試與更新 </el-button>
    <el-button @click="setDog()"> 點(diǎn)擊我進(jìn)行數(shù)據(jù)的測(cè)試與更新 </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:"旺財(cái)",
   age:30,
   sex:"男"
})
let parent = "法拉利"
let name = '張三洗頭愛飄柔'
import HelloWorld from './components/HelloWorld.vue'
import propvues from './components/props.vue'
//通過(guò)自定義事件獲取子組件的數(shù)據(jù) 子傳遞父親
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'
      }
  })
}
// 掛載完畢進(jìn)行獲取數(shù)據(jù)的請(qǐng)求
onMounted(()=>{
    getUserName()
    provide("parent",parent)
})
//通過(guò)ref獲取子組件的數(shù)據(jù) 父親傳子
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>

子組件文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-647930.html

<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數(shù)據(jù)"
const getInject   =  inject('parent')
const names = 'llllllllhjhhjjjs'
provide('names',names)

const myserver = function(){
     console.log("創(chuàng)建的事件被調(diào)用")
}
const sentValue  = function(){
    console.log("已經(jīng)被觸發(fā)創(chuàng)建當(dāng)前事件")
     // 第一個(gè)為創(chuàng)建事件的方法，第二個(gè)為傳遞事件的 參數(shù)
      $emit('sentValue',)
}
// 父組件獲取子組件的數(shù)據(jù)需要進(jìn)行拋出才能獲取
defineExpose({
       myserver
})
</script>

到了這里，關(guān)于vue3 ref()的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！