宜宾网站建设公司

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

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

创新互联是一家集网站建设,志丹企业网站建设,志丹品牌网站建设,网站定制,志丹网站建设报价,网络营销,网络优化,志丹网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

setup语法糖

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

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

// setup 下还可以附加

defineProps defineEmits与组件应用

// 子组件

 

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')
}
 

 
// 父组件

    
  
  import HelloWorld from '../components/HelloWorld.vue'; import { ref ,reactive,toRefs } from 'vue'  const obj = reactive({       id: 0,       text: '小红'     })  const changeP=(e)=>{       console.log(e)     }   、

defineExpose与组件应用

// 子组件

 

 
const testPose =()=>{
  console.log('子组件暴露方法')
}
defineExpose({
  testPose
})

 
// 父组件


import HelloWorld from '../components/HelloWorld.vue';
import { ref } from 'vue'
// setup函数的话可以从context上查找
const helloSon = ref(null);
const testEpose = () => {
  helloSon.value.testPose();
}

自定义指令相关

  • 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 钩子中可用。

应用


//setup 外部调用

//或者 setup内部

import vTest from './TestDirective'

对象字面量

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

到此，相信大家对“Vue3中的setup与自定义指令如何使用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


网站栏目：Vue3中的setup与自定义指令如何使用
本文链接：http://ybzwz.com/article/jppsdh.html

其他资讯