likes
comments
collection
share

vue3 全局api

作者站长头像
站长
· 阅读数 16

h()

接收三个参数

  1. type：HTML 标签名、组件、异步组件或函数式组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。如果是HTML 标签，写成字符串h('div',...),如果是组件名直接写：h(mybutton,...)
  2. props: 对象类型,与我们将在模板中使用的 attribute、prop 和事件相对应。可选。
  3. children：类型：String | Array | Object，如果只是向标签添加值，则可以写个字符串，或者字符串变量，如果需要内嵌其它的标签，需要写成数组或者对象，里面再写h()函数进行创建。如果是对象则props参数不可省。
h('h1', {}, 'Some title')

h('div', {}, [
  'Some text comes first.',
  h('h1', 'A headline'),
  h(MyComponent, {
    someProp: 'foobar'
  })
])

directive 自定义指令

可以全局注册也可以在组件中使用directive的选项局部注册，接收两个参数：

  1. {string} name
  2. {Function | Object} [definition] 如果传入 definition 参数，则返回应用实例。如果不传入 definition 参数，则返回指令定义。即如果传是注册一个指令，如果不传测试检测有没有注册过。
// 组件中注册
<template>
  <div>
    <input type="text" v-focus>
  </div>
</template>

export default {
  directives: {
    focus: {
      // 指令的定义
      mounted(el) {
        el.focus()
        console.log(el);
      }
    }
  },
}

自定义指令的钩子函数

指令具有一组生命周期钩子：

created() {},在绑定元素的 attribute 或事件监听器被应用之前调用

beforeMount() {}, 在绑定元素的父组件挂载之前调用

mounted() {}, 在绑定元素的父组件挂载之后调用

beforeUpdate() {}, 在包含组件的 VNode 更新之前调用

updated() {}, 在包含组件的 VNode 及其子组件的 VNode 更新之后调用

beforeUnmount() {}, 在绑定元素的父组件卸载之前调用

unmounted() {}， 在绑定元素的父组件卸载之后调用

definition 的函数参数

  1. el： 指令绑定到的元素。这可用于直接操作 DOM

  2. binding： 包含多个property 的对象。 instance：使用指令的组件实例。 value：传递给指令的值。 oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否有更改都可用。 arg：传递给指令的参数(如果有的话)。例如在 v-my-directive:foo 中，arg 为 "foo"。 modifiers：包含修饰符(如果有的话) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。 dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中

  3. vnode： 一个真实 DOM 元素的蓝图，对应上面收到的 el 参数。

  4. prevNode： 上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

    <template>
  <div style="height:150vh;">
    <!-- 动态参数的使用，需要用中括号包起来，如果不是动态参数，直接写就行了 -->
    <div v-fiexd:[direct] = '20'>Hello world </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      direct:'top'
    }
  },
  directives: {
    fiexd: {
      mounted(el,binding) {
        el.style.position = 'fixed';
        const s = binding.arg || 'top';
        el.style[s] = binding.value + 'px';
      }
    }
  },
}
</script>

如果想要修改 direct的值，而改变位置，会发现上面的代码就不太行了，可以在fiexd指定中添加，update钩子函数，这样就可实现了。

<div v-fiexd:[direct] = padding>Hello world </div>

 data(){
    return {
      direct:'left',
      padding:'50'
    }
  },
  directives: {
    fiexd: {
      mounted(el,binding) {
        el.style.position = 'fixed';
        const s = binding.arg || 'top';
        el.style[s] = binding.value + 'px';
      },
      updated(el, binding) {
        const s = binding.arg || 'top'
        el.style[s] = binding.value + 'px'
      }
    }
  },

这时候去修改padding的值，或者direct 就可以实现动态修改样式了。

函数简写

在前面的例子中，你可能想在 mounted 和 updated 时触发相同行为，而不关心其他的钩子函数。那么你可以通过将这个回调函数传递给指令来实现： 如果 definition不是一个对象，而是一个函数则它就等于在mounted和updated中写了代码一样。

app.directive('pin', (el, binding) => {
  el.style.position = 'fixed'
  const s = binding.arg || 'top'
  el.style[s] = binding.value + 'px'
})