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-ifv-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')) // sutoValue('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
      	}
      })
      
posted @   这样那样如此如此  阅读(8)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示