Vue: Day_2

Vue基础

Chapter 2

---

• 当想获取父组件传递的属性或者值时但是不通过define方法

  • $attrs获取父组件传递的属性如:<Child class="child" />，可以通过$attrs.class获取

  • 如果控制输入类或者点击类的DOM，但是又是父组件传递处理函数这是就需要$emit(handleFn, $event)来访问到父组件传递的函数$emit，以及操作对象$event

  • $slots来判断父组件是否有传该插槽

    • <Child>
          // 可以通过 value.hello 访问到子组件传递的hello值：su
      	<template #header="value">hello</template>
          <template v-slot:main="mainValue">world</template>
          <div>
              default
          </div>
      </Child>
      
      // Child组件下
      <template>
      	<div v-if="$slots.header">
              <slot name="header" hello="su" />
          </div>
      	<div v-if="$slots.main">
              <slot name="main" />
          </div>
      	<div v-if="$slots.default">
              <slot />
          </div>
      </template>
      

• 在3.5+之后，想要通过ref操作DOM，应该使用useTemplateRef<HTMLDivElement>('div')

• v-if和v-for不推荐在同一个DOM上使用，因为它们的优先级不够明确。如果在同一个DOM上使用，则v-if会先执行，也就是v-if访问不到v-for中的变量

• 当父组件传递给子组件一些props时，值的name建议像HTML的属性一样比较规范，如： <Child :is-false="false" />，而子组件可以正常使用小驼峰进行接收

• 当父组件给子组件传递属性时，如果子组件只有一个根元素的话，则该根组件会自动赋予父组件传递的属性。如果子组件有超过一个的根元素，则可以通过$attrs来手动规定赋予给哪一个元素，如：<div v-bind="$attrs"></div>

• 如果要阻止根元素自动继承父组件传递的属性可以使用defineOptions({inheritAttrs: false})来禁止自动继承

• 注入与提供

  • 防止多层传递，而中间的层数却用不到该值

  • 父组件传递provide('定义name', value: 传递的值)

  • 深层子组件接收inject<number>('父组件定义的name', value: 当没有值时返回该默认值, boolean: 为true时将会执行第二个参数的结果并返回)

• 异步组件defineAsyncComponent(() => {})返回一个promise

  • defineAsyncComponent({
    	// 导入
    	loader: () => import('./App.vue'),
    	// 在导入过程中会显示的组件
    	loadingComponent: <Loading />,
    	// 指定多久后 再导入
    	delay: 20,
    	errorComponent: <Error />,
    	// 规定多久后超时
    	timeout: 4000,
    })
    

• 组合式函数

  • 通过组合式函数来减少代码耦合

  • export function useMouse() {
    	const x = ref(0);
    	const y = ref(0);
    	
    	function move(e: MouseEvent) {
            x.value = e.target.pageX;
            y.value = e.target.pageY;
        }
        
        onMounted(() => window.addEventListener('mousemove', move))
        onUnmounted(() => window.removeEventListener('mousemove', move))
        
        // x, y 是 ref 具有响应式，但是包裹的对象不具有响应式
        return { x, y };
    }
    

• toValue是3.5+后提供的函数，通过vue导入，可以解构ref，如果是普通的变量就正常返回，toValue(ref('su')) // su、toValue('su') // su

• 自定义指令：const vFocus = { mounted: (el) => el.focus() }，赋值DOM：<input v-focus />，DOM渲染后，将会自动聚焦

  • // 可以在全局注册自定义指令
    const app = createApp(App);
    app.directive('focus', {
    	mounted(el, bindingValues, VNode) {
    		el.focus();
    		// bindingValues.value是 v-focus="value"
    		// bindingValues.oldValue是 更新前的旧值
    		// bindingValues.org是 v-focus:arg
    		// bindingValues.modifiers是 v-focus.capitalize
    	}
    })