El método de usar ref para llamar a subcomponentes en vue3.0

Prefacio:

      Comparado con ref en vue2.0, el uso de ref en vue3.0 también ha cambiado mucho. Aquí hay un resumen de su uso específico.

ver 2.0

Componente padre:

modelo

 <Table ref="eleTable" @handle="handleFun"></Table>

métodos:

this.$refs.eleTable.子组件的方法名+()

this.$refs.eleTable.子组件的属性名

vue 3.0

Componente padre:

modelo

 <Table ref="eleTable" @handle="handleFun"></Table>

En el guión:

import {  ref  } from 'vue'

setup() { 
   //ref方法
    const eleTable = ref()  //eleTable是页面ref后面对应的名字
    const clickSon = () => {
      eleTable.value.changeShowText() //调用子组件的方法
      let arr = eleTable.value.tableData //获取子组件 setup 里面定义的变量
    }
}

Obtener los datos del subcomponente

Subconjunto:

modelo:

<el-button type="success" style="margin:10px 0">{
   
   {conts}}</el-button>

texto:

import {  ref  } from 'vue'

setup(){
    const tableData = [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }]


    const conts = ref("我是子组件"); //我是子组件是默认展示的数据
    const changeShowText = () =>{
      conts.value = "22222222222";
    }

    return {
      //数据
      tableData,
      conts,
      //函数方法
      changeShowText

    }
}

Está bien, está por aquí