vue3 ref()-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 ref()。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

通常我们在获取子组件的数据和方法的操作

解决 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>

子组件文章来源地址https://www.toymoban.com/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数据"
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>

到了这里，关于vue3 ref()的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！