«

Vue3中的setup与自定义指令如何使用

时间:2024-4-22 11:13     作者:韩俊     分类: Javascript


本篇内容主要讲解“Vue3中的setup与自定义指令如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3中的setup与自定义指令如何使用”吧!

setup语法糖

最大好处就是所有声明部分皆可直接使用,无需return出去

注意:部分功能还不完善,如:name、render还需要单独加入script标签按compositionAPI方式编写

// setup 下还可以附加<script>

setup语法糖独有

<script setup>
import { ref ,reactive,toRefs } from 'vue'
const a = 1;
const num = ref(99)  // 基本数据类型
const user = reactive({ // 引用数据类型
  age:11
})
// 解构能获取响应式属性 {}解构 toRefs保留响应式
const { age } = toRefs(user)
// 导出
defineExpose({
  a
})
// props
const props = defineProps({
  foo: String
})
// 事件
const emit = defineEmits(['change', 'delete'])
// 自定义指令
const vMyDirective = {
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
    console.log('创建了')
  },
}
</script>

defineProps defineEmits与组件应用

// 子组件
<template>
  <div class="hello">
    <h3>{{ msg }}</h3>
    <slot name="btn">
 
    </slot>
    <button @click="chickMe"></button>
  </div>
</template>
 
<script setup>
import { useSlots, useAttrs } from 'vue';
 
const slots = useSlots()
const attrs = useAttrs()
const props = defineProps({
  msg: String
})
const emit = defineEmits(['change'])
console.log(slots, attrs)
const chickMe = ()=>{
  emit('change','abc')
}
 
</script>
 
// 父组件
<template>
  <div class="home" >
    <HelloWorld msg="hello" atr="attrs" @change="changeP ">
      <template #btn>
        <div>我是 btn:{{ obj.text }}</div>
      </template>
    </HelloWorld>
  </div>
</template>
 <script setup>
import HelloWorld from '../components/HelloWorld.vue';
import { ref ,reactive,toRefs } from 'vue'
 const obj = reactive({
      id: 0,
      text: '小红'
    })
 const changeP=(e)=>{
      console.log(e)
    }
</script> 
、

defineExpose与组件应用

// 子组件
<template>
  <div class="hello">
        123
  </div>
</template>
 
<script setup>
 
const testPose =()=>{
  console.log('子组件暴露方法')
}
defineExpose({
  testPose
})
</script>
 
// 父组件
<template>
  <div class="home" v-test>
    <HelloWorld  ref="helloSon"></HelloWorld>
    <button @click="testEpose"></button>
  </div>
</template>
<script setup>
import HelloWorld from '../components/HelloWorld.vue';
import { ref } from 'vue'
// setup函数的话可以从context上查找
const helloSon = ref(null);
const testEpose = () => {
  helloSon.value.testPose();
}
</script>

自定义指令相关

  • created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时,这很有用。

  • beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。

  • mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里。

  • beforeUpdate:在更新包含组件的 VNode 之前调用。

  • updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。

  • beforeUnmount:在卸载绑定元素的父组件之前调用

  • unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。

import { createApp } from 'vue';
const Test = createApp();
Test.directive('my-directive', {
    // 在绑定元素的 attribute 前
    // 或事件监听器应用前调用
    created(el, binding, vnode, prevVnode) {
        // 下面会介绍各个参数的细节
        console.log('创建了')
    },
    // 在元素被插入到 DOM 前调用
    beforeMount(el, binding, vnode, prevVnode) { },
    // 在绑定元素的父组件
    // 及他自己的所有子节点都挂载完成后调用
    mounted(el, binding, vnode, prevVnode) { },
    // 绑定元素的父组件更新前调用
    beforeUpdate(el, binding, vnode, prevVnode) { },
    // 在绑定元素的父组件
    // 及他自己的所有子节点都更新后调用
    updated(el, binding, vnode, prevVnode) { },
    // 绑定元素的父组件卸载前调用
    beforeUnmount(el, binding, vnode, prevVnode) { },
    // 绑定元素的父组件卸载后调用
    unmounted(el, binding, vnode, prevVnode) { }
})
 
export default Test.directive('my-directive');
  • el
    :指令绑定到的元素。这可以用于直接操作 DOM。

  • binding
    :一个对象,包含以下属性。

    • value
      :传递给指令的值。例如在
      v-my-directive="1 + 1"
      中,值是
      2

    • oldValue
      :之前的值,仅在
      beforeUpdate
      updated
      中可用。无论值是否更改,它都可用。

    • arg
      :传递给指令的参数 (如果有的话)。例如在
      v-my-directive:foo
      中,参数是
      "foo"

    • modifiers
      :一个包含修饰符的对象 (如果有的话)。例如在
      v-my-directive.foo.bar
      中,修饰符对象是
      { foo: true, bar: true }

    • instance
      :使用该指令的组件实例。
      dir
      :指令的定义对象。

  • vnode
    :代表绑定元素的底层 VNode。

  • prevNode
    :之前的渲染中代表指令所绑定元素的 VNode。仅在
    beforeUpdate
    updated
    钩子中可用。

应用

<template>
  <div class="home" v-test>
  </div>
</template>
//setup 外部调用
<script>
// 指令必须 vXxx 这样书写
import vTest from './TestDirective'
export default defineComponent({
   directives: {
      test:vTest,
    },
  setup(props) {
    // console.log('Test',vTest)
    
    return {
   
    };
  } 
})
</script>
//或者 setup内部
<script setup>
import vTest from './TestDirective'
</script>

对象字面量

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
 
app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
})

标签: javascript vue

热门推荐