网站建设销售人员培训教程,高端网站建设上海,月付商城网站建站,建筑国企招聘信息网一#xff0c;props
props可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用#xff01;
父组件给子组件传递数据 Child info我爱祖国 :moneymoney/Chi…一props
props可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用
父组件给子组件传递数据 Child info我爱祖国 :moneymoney/Child 子组件获取父组件传递数据:方式1 let props defineProps({info:{type:String,//接受的数据类型default:默认参数,//接受默认数据},money:{type:Number,default:0
}}) 子组件获取父组件传递数据:方式2 let props defineProps([info,money]); 子组件获取到props数据就可以在模板中使用了,但是切记props是只读的(只能读取不能修改)
二useAttrs
在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),次函数功能类似于Vue2框架中$attrs属性与$listeners方法。
比如:在父组件内部使用一个子组件my-button my-button typesuccess sizesmall title标题 clickhandler/my-button 子组件内部可以通过useAttrs方法获取组件属性与事件.因此你也发现了它类似于props,可以接受父组件传递过来的属性与属性值。需要注意如果defineProps接受了某一个属性useAttrs方法返回的对象身上就没有相应属性与属性值。 script setup langts import {useAttrs} from vue; let $attrs useAttrs(); /script 三ref和$parent ref,提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC那么子组件内部的方法与响应式数据父组件可以使用的。
比如:在父组件挂载完毕获取组件实例
父组件内部代码: template div h1ref与$parent/h1 Son refson/Son /div /template script setup langts import Son from ./Son.vue; import { onMounted, ref } from vue; const son ref(); onMounted(() { console.log(son.value); }); /script 但是需要注意如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”外部不能访问 script setup langts import { ref } from vue; //数据 let money ref(1000); //方法 const handler (){ } defineExpose({ money, handler }) /script $parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例当然父组件的数据与方法需要通过defineExpose方法对外暴露 button clickhandler($parent)点击我获取父组件实例/button 四pinia
这里不做过多介绍有需要可搜索我的相关文章
