vue3 父传参到子(defineProps),父调子方法(defineExpose)

2024-01-08 18:58:11

父页面

    <HelloWorld  ref="child" :objData="objData"  />
  	<a-button @click="childMethod">调用子页面的方法</a-button>

	<script setup lang="ts">
	  import HelloWorld from './components/HelloWorld.vue'
	  import {ref,reactive} from 'vue';
	  let objData = reactive({
	    name:'張三',
	    age:18,
	  })
	
  // ****************************
  const child = ref();
  function childMethod(){
    child.value.getData();            //调用子页面的方法getData()
    console.log(child.value.message)  //获取子页面中message的值
    
  }
// **************************
</script>

子页面

<script lang="ts" setup>
import {ref,defineProps,defineExpose} from 'vue';
const message = ref('Hello, World!');
// *******************************************************************************************
// defineProps是一个用于定义组件的props的函数。
// 作用:使得组件能够接收外部传入的数据,并且使得这些props在组件内部可用。 eg:父向子传参

// 方式一:以对象的形式去接收
    // const props = defineProps({
    //   name: String,
    //   objData:{
    //     type:Object
    //   }
    // })
// 方式二:以数组的形式接收
    const props = defineProps(['objData'])  
    console.log(props.objData)
// ************************************************************************************************
function getData(){
  console.log(1212)
}

// defineExpose是vue3新增的一个api,放在<scipt setup>下使用的
// 作用:把属性和方法暴露出去,可以用于父子组件通信,子组件把属性暴露出去, 父组件用ref获取子组件DOM,子组件暴露的方法或属性可以用dom获取。
defineExpose({
  getData,
  message
  });
  // ***********************************************************************************************
</script>

文章来源:https://blog.csdn.net/weixin_38673922/article/details/135461889
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。