一、封装vue组件
一个vue页面可以是一个组件，封装组件的根本好处是代码复用，如果一个功能的代码块需要重复书写两次以上，就可以考虑把它封装成组件了。
示例：
我需要重复使用一个lable框+switch组成的样式，因为将这部分代码单独放到了一个vue页面，取名Switch.vue
<template> <div> <van-row justify="space-between"> <van-col span="8"> <!--lable框,用于填写属性名--> <van-field maxlength="6" v-model="extendPropsName" /> </van-col> <van-col span="16"> <!--开关选择器--> <van-switch v-model="extendProps" /> </van-col> </van-row> </div> </template> <script> import { ref, defineExpose } from "vue"; export default { //接收父组件传来的值,这里可以赋默认值 props: { extendPropsName: '', extendProps: false }, //props中存放的是父组件传进来的值 setup(props) { let extendPropsName = ref(props.extendPropsName);//属性名 let extendProps =ref(props.extendProps);//开关选择器 const componName = 'switches'; defineExpose({ extendPropsName, extendProps, componName });//暴露给父组件的值 //返回给template使用 return { extendPropsName, extendProps, componName } } } </script>
二、使用自定义vue组件
封装好的组件可以被另一个vue页面作为子组件引入
普通引入方式如下：
<template> <!--父组件向子组件传值--> <switches :extendProps="extendProps" :extendPropsName="extendPropsName"></switches> </template> <script> //因为使用的是export default向外暴露成员，import后面的组件名随便写，但要有辨识度 import switches from "@/components/DynamicComponent/Switch.vue"; import { ref } from "vue"; export default { components: {switches}, //在components登记后才能做为自定义标签使用 setup() { let extendProps=ref(); let extendPropsName=ref(); return{ extendProps, extendPropsName } } } </script>
搭配使用component标签引入：
component标签：它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
官方说明：渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染
<template> <component v-for="item in itemDynamicProps.data" :key="item.extendPropsID" :is="item.componentType" :extendProps="extendProps" :extendPropsName="item.extendPropsName" ></component> </template> <script> //用一个component标签显示两个自定义组件 import switches from "@/components/DynamicComponent/Switch.vue"; import lables from "@/components/DynamicComponent/Lable.vue"; import { reactive } from "vue"; export default { components: { switches,lables }, //在components登记后才能做为自定义标签使用 setup() { //在component标签内动态显示的组件，对象包data数组是为了更容易实现响应式 let itemDynamicProps = reactive({ data: [ {extendPropsID:1, componentType:switches, extendProps:'开关选择器', extendPropsName:'开关选择器的名字'}, {extendPropsID:2, componentType:lables , extendProps:'输入框', extendPropsName:'输入框的名字'} ], }); return{ itemDynamicProps } } } </script>
三、父子组件传值
标题二已经说明了父组件如何向子组件传值，但我们偶尔也需要子组件向父组件传值。
子组件：
defineExpose({ extendPropsName, extendProps, componName });//暴露给父组件的值
父组件：
使用子组件时通过ref属性获取子组件的值
<component :ref="setPropsRef"/>
