为什么使用组件化开发?
当前前端比较流行的 Vue React 等框架,都会通过编写组件来完成业务需求,也就是组件化开发。包括小程序开发也会用到组件化开发的思想。
分析组件化思想开发应用程序:
一个 Vue 的页面,应该像是棵嵌套的组件树的形式来组织:
vue3 入口文件:
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
createApp()
函数传入了一个App
,App
就是一个组件,是项目的根组件。
下面将分析 Vue3 中组件化开发的常用方法。
$props
用于向子组件传递数据 $props: {{$props}}
语法糖中需要使用 defineProps
Api获取propsconst props = defineProps({num: Number,
})
$emit
用于调用父级组件的方法
语法糖中需要使用 defineEmits
Api声明emits
const emits = defineEmits(['add'])
function add() {emits('add')
}
$parent
用于获取父组件实例对象。 中组件实例不会暴露出来,直接在模板中使用
$parent
会返回一个空对象。
为了在 组件中明确要暴露出去的属性,使用
defineExpose
编译器宏:
const parData = ref("父组件数据");
defineExpose({parData,
})
子组件:
父组件 parData: {{$parent.parData}}
props
或自定义事件的 attribute 绑定和事件。子组件:
在父组件中,$attrs
的值就是 { "a": "a", "b": "b" }
。
v-bind="$attrs"
传入内部组件——这在创建高阶的组件时会非常有用,举个例子:父组件:
子组件 Bar.vue
将$attrs对象绑定到当前标签
在浏览器查看DOM,age 和 sex
作为属性被绑定到了这个p
标签上面。
中,需要使用useAttrs
import { useAttrs } from 'vue';
const attrs = useAttrs();
console.log(attrs.sex); // boy
provide
选项来提供数据,子组件有一个 inject
选项来开始使用这些数据。父级组件:
provide("user", "kong");
provide("pass", 123456);
子孙级组件:
const user = inject("user");
const pass = inject("pass");
用于内容分发,将
元素作为承载分发内容的出口。
SlotComp
组件
使用上面的组件
head插槽
foot插槽
SlotComp
组件中带 name
属性的 slot
插槽内容,会被替换。被替换的内容 需要在父组件中使用 v-slot
指令为插槽提供想要显示的内容。
foot插槽
{{msg}}{{items}}
上面的例子,{{items}}
不会显示数据。
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
让插槽的内容访问子组件才有的数据:
插槽内容:
{{i}}
绑定在
元素上的 attribute 被称为插槽 prop。现在,在父级作用域中,我们可以使用带值的 v-slot
来定义我们提供的插槽 prop 的名字,本例中就是slotProps
。
v-model
应用在表单上面,实现双向绑定:
v-model
应用在自定义组件上面:父组件中使用自定义组件:
const msg = ref('hello world!');
相当于:
自定义组件ModelComp.vue
中:
const props = defineProps({modelValue: String
})
const emits = defineEmits(["update:modelValue"
])
const text = ref("请输入..");
// text改变时执行
watch(text,()=>{emits("update:modelValue",text.value);
})
modelValue
update:modelValue
设置v-model
参数:
相当于:
自定义组件ModelComp.vue
中:
const props = defineProps({show: Boolean
})
const emits = defineEmits(["update:show",
])
class绑定:根据需求动态绑定class样式时可以使用一下几种方法
写法1:对象语法
const isActive = ref(false);
const changeColor = () => {isActive.value = !isActive.value;
}
写法2:对象语法
const isActive2 = reactive({
active: false,
})
const classObj = computed(() => {
return {active: isActive2.active,'font-30': true,
}
})
const changeColor2 = () => {
isActive2.active = !isActive2.active
}
写法3:数组语法
三目运算符写法
数组语法中结合对象语法使用
动态绑定行内style样式
三种方式:html代码
style绑定
style对象绑定(直接绑定到一个对象,代码更清新)
style数组绑定
js 代码
const colorRed = ref('#f00')
const styleObj = reactive({fontSize: '30px',
})
const styleObjRed = reactive({color: '#f00',
})
为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。
有需要的小伙伴,可以点击下方卡片领取,无偿分享