Vue3 高级语法以及自定义组件

最新推荐文章于 2024-02-19 11:22:30 发布
最新推荐文章于 2024-02-19 11:22:30 发布
阅读量3.9k 收藏 5
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
ik
本文链接：https://blog.csdn.net/weixin_46104934/article/details/126614426
版权

文章目录

1 .render函数

1. 1 h函数

  • h() 函数是一个用于创建vnode 的一个函数；
  • 其实更准备的命名是createVNode() 函数，但是为了简便在Vue将之简化为h() 函数；

h()函数如何使用呢？它接受三个参数：

第一个参数

在这里插入图片描述
第二个参数

在这里插入图片描述

第三个参数
在这里插入图片描述
注意事项：

  • 如果没有props，那么通常可以将children作为第二个参数传入；
  • 如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入；

1 .1 .1 h()函数的基本使用

1 .render函数选项中使用； =>没有template模板

<script>
  import { h } from 'vue';

  export default {
    render() {
      return h("h2", {class: "title"}, "Hello Render")
    }
  }
</script>
<style scoped>
</style>

2 . setup函数选项中使用（setup本身需要是一个函数类型，函数再返回h函数创建的VNode）

在这里插入图片描述

  • 两张方式实现计数器
<script>
  import { h } from 'vue';

  export default {
    data() {
      return {
        counter: 0
      }
    },
    render() {
      return h("div", {class: "app"}, [
        h("h2", null, `当前计数: ${this.counter}`),
        h("button", {
          onClick: () => this.counter++
        }, "+1"),
        h("button", {
          onClick: () => this.counter--
        }, "-1"),
      ])
    }
  }
</script>
<style scoped>
</style>

<script>
  import { ref, h } from 'vue';

  export default {
    setup() {
      const counter = ref(0);
      return () => {
        return h("div", {class: "app"}, [
          h("h2", null, `当前计数: ${counter.value}`),
          h("button", {
            onClick: () => counter.value++
          }, "+1"),
          h("button", {
            onClick: () => counter.value--
          }, "-1"),
        ])
      }
    }
  }
</script>

1 .1 .2 h()函数中组件与插槽的使用

App.vue

<script>
  import { h } from 'vue';
  import HelloWorld from './HelloWorld.vue';
  export default {
    render() {
      return h("div", null, [
        h(HelloWorld, null, {
          default: props => h("span", null, `app传入到HelloWorld中的内容: ${props.name}`)
        })
      ])
    }
  }
</script>

HelloWord.vue'

<script>
  import { h } from "vue";

  export default {
    render() {
      return h("div", null, [
        h("h2", null, "Hello World"),
        this.$slots.default ? this.$slots.default({name: "coderwhy"}): h("span", null, "我是HelloWorld的插槽默认值")
      ])
    }
  }
</script>

1 .2 jsx语法糖

1 .2 .1 jsx的配置(旧版本)

  • 安装Babel支持Vue的jsx插件：
npm install @vue/babel-plugin-jsx -D
  • 在babel.config.js配置文件中配置插件：
    在这里插入图片描述
    在这里插入图片描述

1 .2 .2 jsx计数器案例

<script>
  export default {
    data() {
      return {
        counter: 0
      }
    },
    render() {
      const increment = () => this.counter++;
      const decrement = () => this.counter--;

      return (
        <div>
          <h2>当前计数: {this.counter}</h2>
          <button onClick={increment}>+1</button>
          <button onClick={decrement}>-1</button>
        </div>
      )
    }
  }
</script>

1 .2 .3 jsx组件的使用

App.vue

<script>
  import HelloWorld from './HelloWorld.vue';
  export default {
    data() {
      return {
        counter: 0
      }
    },
    render() {
      const increment = () => this.counter++;
      const decrement = () => this.counter--;
      return (
        <div>
          <h2>当前计数: {this.counter}</h2>
          <button onClick={increment}>+1</button>
          <button onClick={decrement}>-1</button>
          <HelloWorld>
          </HelloWorld>
        </div>
      )
    }
  }
</script>
<style lang="scss" scoped>
</style>

HelloWord.vue

<script>
  export default {
    render() {
      return (
        <div>
          <h2>HelloWorld</h2>
          {this.$slots.default ? this.$slots.default(): <span>哈哈哈</span>}
        </div>
      )
    }
  }
</script>

<style scoped>

</style>

2 .指令的生命周期

在这里插入图片描述
参考代码

<template>
  <div>
    <button v-if="counter < 2" v-why.aaaa.bbbb="'coderwhy'" @click="increment">当前计数: {{counter}}</button>
  </div>
</template>

<script>
  import { ref } from "vue";

  export default {
    // 局部指令
    directives: {
      why: {
        created(el, bindings, vnode, preVnode) {
          console.log("why created", el, bindings, vnode, preVnode);
          console.log(bindings.value);
          console.log(bindings.modifiers);
        },
        beforeMount() {
          console.log("why beforeMount");
        },
        mounted() {
          console.log("why mounted");
        },
        beforeUpdate() {
          console.log("why beforeUpdate");
        },
        updated() {
          console.log("why updated");
        },
        beforeUnmount() {
          console.log("why beforeUnmount");
        },
        unmounted() {
          console.log("why unmounted");
        }
      }
    },
    setup() {
      const counter = ref(0);
      const increment = () => counter.value++;

      return {
        counter,
        increment
      }
    }
  }
</script>

<style scoped>

</style>

3 .自定义组件

  • 在Vue中，代码的复用和抽象主要还是通过组件；
  • 通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；

自定义指令分为两种：

  • 自定义局部指令：组件中通过directives 选项，只能在当前组件中使用；
  • 自定义全局指令：app的directive 方法，可以在任意组件中被使用；

3 .1自定义组件元素挂载完成后可以自定获取焦点

  • 普通的方式
<template>
  <div>
    <input type="text" ref="input">
  </div>
</template>

<script>
  import { ref, onMounted } from "vue";

  export default {
    setup() {
      const input = ref(null);

      onMounted(() => {
        input.value.focus();
      })

      return {
        input
      }
    }
  }
</script>
<style scoped>
</style>
  • 局部自定义指令
<template>
  <input type="text" v-focuss="" value="取值" /> 值
</template>

<script>
// import {directives} from 'vue';
export default {
  // 自定义组件实现聚焦 
	// 自定义组件利用directives方法实现的实现
  directives: {
		// 自定义组件的方式
    focuss: {
			// 挂载前
			mounted(el,any,anyy,anyyy) {
				el.focus() 
				// 第三个数值可以拿去值
				console.log(el,any,anyy,anyyy);
				console.log(anyy.props.value);
				
			}
		},
  },
};
</script>
<style>
</style>
  • 全局自定义组件使用
app.directive("focus", {
  mounted(el, bindings, vnode, preVnode) {
    console.log("focus mounted");
    el.focus();
  }
})

3 .2 指令的参数和修饰符

  • 如果我们指令需要接受一些参数或者修饰符应该如何操作呢？

    • info是参数的名称；

  • aaa-bbb是修饰符的名称；

  • 后面是传入的具体的值；

  • 在我们的生命周期中，我们可以通过bindings 获取到对应的内容：
    在这里插入图片描述
    在这里插入图片描述

3 .3自定义指令实现时间的转换

  • 时间戳的显示需求：

    • 在开发中，大多数情况下从服务器获取到的都是时间戳；
    • 我们需要将时间戳转换成具体格式化的时间来展示；
    • 在Vue2中我们可以通过过滤器来完成；
    • 在Vue3中我们可以通过计算属性（computed） 或者自定义一个方法（methods） 来完成；
    • 其实我们还可以通过一个自定义的指令来完成；

  • 实现一个可以自动对时间格式化的指令v-format-time：

    • 这里我封装了一个函数，在首页中我们只需要调用这个函数并且传入app即可；
      在这里插入图片描述
  • 具体代码实现
    App.vue
<template>
  <h2 v-format-time="'YYYY/MM/DD'">{{timestamp}}</h2>
  <h2 v-format-time>{{timestamp}}</h2>
</template>

<script>
  export default {
    // 创建时间戳进行返回
    setup() {
      const timestamp = 1624452193;

      return {
        timestamp
      }
    },
    mounted() {
      console.log("app mounted");
    }
  }
</script>
<style scoped>

</style>

index.js=>入口

import registerFormatTime from './format-time';

export default function registerDirectives(app) {
  registerFormatTime(app);
}

format-time.js

import dayjs from 'dayjs';

export default function(app) {
  app.directive("format-time", {
    created(el, bindings) {
      bindings.formatString = "YYYY-MM-DD HH:mm:ss";
      if (bindings.value) {
        bindings.formatString = bindings.value;
      }
    },
    mounted(el, bindings) {
      const textContent = el.textContent;
      let timestamp = parseInt(textContent);
      if (textContent.length === 10) {
        timestamp = timestamp * 1000
      }
      el.textContent = dayjs(timestamp).format(bindings.formatString);
    }
  })
}

main.js

import { createApp } from 'vue'
import App from './03_自定义指令/App.vue'
import registerDirectives from './directives'
const app = createApp(App);

registerDirectives(app);
// app.directive("focus", {
//   mounted(el, bindings, vnode, preVnode) {
//     console.log("focus mounted");
//     el.focus();
//   }
// })
app.mount('#app');

4 .Vue插件

通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：

  • 对象类型：一个对象，但是必须包含一个install 的函数，该函数会在安装插件时执行；
  • 函数类型：一个function，这个函数会在安装插件时自动执行；

插件可以完成的功能没有限制，比如下面的几种都是可以的：

  • 添加全局方法或者property，通过把它们添加到config.globalProperties 上实现；
  • 添加全局资源：指令/过滤器/过渡等；
  • 通过全局mixin 来添加一些组件选项；
  • 一个库，提供自己的API，同时提供上面提到的一个或多个功能；

4 .1插件的编写方式

对象类型

在这里插入图片描述
函数类型

在这里插入图片描述

  • 具体的访问过程
    在这里插入图片描述
    plugins.Object.js
export default {
  install(app,el) {
		   app.config.globalProperties.$name = 'coderwhy'
			
	},
};
  • 在App.vue中访问自定义组件的值
<template>
  {{ $name }}
</template>

<script>
 import { getCurrentInstance } from "vue";
export default {
  // 在setup中拿取自定义组件中的属性值
	// setup没有this的绑定拿取不到自定义组件的值因此需要在导入app=>getCurrentInstance
	setup(props) {
		const app=getCurrentInstance()
		//进行取值
		console.log(app.appContext.config);
	},
	// 生命周期中拿取自定义组件中的值

  created() {
	  console.log(this.$name)
	},
};
</script>

<style>
</style>

插件的编写具体方法

5 .Teleport的使用

在这里插入图片描述
实例代码效果
在这里插入图片描述
在这里插入图片描述

5 .1和组件结合使用

  • teleport也可以和组件结合一起来使用：
  • 因此可以在teleport 中使用组件，并且也可以给他传入一些数据；
    在这里插入图片描述
    在这里插入图片描述

5 .2 多个teleport的使用

  • 如果我们将多个teleport应用到同一个目标上（to的值相同），那么这些目标会进行合并：
    在这里插入图片描述
    在这里插入图片描述
  • 具体封装代码实现

App.vue的代码

<template>
  <div class="app">
    <teleport to="#why">
      <h2>当前计数</h2>
      <button>+1</button>
      <hello-world></hello-world>
    </teleport>
    <teleport to="#why">
      <span>呵呵呵呵</span>
    </teleport>
  </div>
</template>
<script>
  import HelloWorld from './HelloWorld.vue';
  export default {
    components: {
      HelloWorld
    },
  }
</script>
<style scoped>
</style>

HelloWord.vue代码

<template>
  <div>
    <h2>Hello World</h2>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style scoped>

</style>
ik i5
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析Vue自定义组件的v-model
12-29
最近在学习vue，今天看到自定义事件的表单输入组件，纠结了一会会然后恍然大悟…官方教程写得不是很详细，所以我决定总结一下。 v-model语法糖 v-model实现了表单输入的双向绑定，我们一般是这么写的： <...
vue实现密码显示与隐藏按钮的自定义组件功能
01-19
v-model的实现需要在自定义组件中自定义一个inputvalue值，因为vue中的父子组件传递机制问题，在组件中直接修改props注入的key字段时，vue会给出错误。子组件中定义inputvalue字段，用于子组件中input元素的值的双向...
在vue3中定义组件的5种方式
qq_42880714的博客
08-11 3758
在vue3中定义组件的5种方式
Vue组件
tby_pr的博客
11-03 986
将一个具备完整功能的项目的一部分分割多处使用 加快项目的进度 可以进行项目的复用 // 就是活字印刷 组件注册分为：全局注册 和局部注册 全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象。全局组件注册后，任何vue实例都可以用。 ！注意： data必须是函数，同时这个函数要求 返回一个对象 => 会被调用多次，对象是引用类型，会影响到别人，但是通过函数返回的话每次都是一个新的，互相之间...
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
02-19 5205
unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；使用此插件后，不需要手动编写import { Button } from 'ant-design-vue’这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。
5 种在 Vue 3 中定义组件的方法
LuckyWinty的博客
07-14 4143
​​​点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群英文 | https://fadamakis.com/the-5-ways-to-define-a-component-in-vue-3-aeb01ac6f39f翻译 | 杨小爱Vue 正在不断发展，目前，在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API，情况大不相同，如果您刚刚开始，可能会感到困惑。让我们定义一个简...
vue3笔记：自定义组件
weixin_45921387的博客
03-04 5583
defineProps()，IProps可以给props设置类型，withDefaults的第二个参数支持给props设置默认值
Vue3 手把手教你自定义组件——setup版
热门推荐
军火库
06-20 1万+
自定义组件，我们一般需要实现这几个点：刚开始尝试Vue 3的时候用的组合式API都是这样的写法 乍一看感觉不如原来的啊，什么逻辑都写到setup里面了，好臃肿的一个方法。但事实上，Vue 3在对响应式重新设计之后，让我们可以通过和方法来创建声明一个响应式变量，也就意味着我们很多逻辑可以不依赖this.data进行开发和编写，甚至一些响应式逻辑都可以多组件复用。在了解了这些点之后，即便我们可以将逻辑拆分独立，通过解构的方式导入setup中，让我们代码更加高内聚低耦合，但我们依然避免不了，复杂组件需要retur
Vue3自定义组件（一）
weixin_48288941的博客
09-01 692
错误写法：（这样写会导致页面加载时就自动调用editData(row)，然后button的onclick方法失效）,部分组件达不到自己的预期，但是又是通用的，所以这时候就想整个自定义组件了；这样一个简单的自定义组件就完成了，先整个简单的，后面再慢慢加其他功能吧。自己用vite创建了一个前端项目，UI使用的是。CommonTable.vue 是自定义组件的主体内容。props.ts是用于自定义组件参数。index.ts是用于组件批量导出。
用Vue3编写一个简单的组件
xuxian的博客
07-06 1113
在 Vue3 中，插槽（Slots）的使用方式与 Vue2 中基本相同，但有一些细微的差异。以下是在 Vue3 中使用插槽的示例：
vue.js自定义组件实现v-model双向数据绑定的示例代码
01-19
我们都清楚v-model其实就是vue的一个语法糖，用于在表单控件或者组件上创建双向绑定。 //表单控件上使用v-model <input type=text v-model=name /> <input type=checkbox v-model=checked/> <!-...
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
11-20
本文实例讲述了vue使用自定义事件的表单输入组件用法。分享给大家供大家参考，具体如下： 自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。 v-model的实现原理 : <input v-model...
详解让sublime text3支持Vue语法高亮显示的示例
08-29
本篇文章主要介绍了让sublime text3支持Vue语法高亮显示的示例，非常具有实用价值，需要的朋友可以参考下
Vue3自定义组件（四）
weixin_48288941的博客
09-08 379
时发现操作栏位通过h()来绑定按钮，使用起来不是很灵活，需要整个可以 完全自定义的组件，然后再绑定到操作栏位，这样才更方便，所以就改了下之前的操作栏位实现方式；在props.ts中新增了新组件的几个参数：（这些用于规范我自定按钮的参数有哪些，方便后续拓展有依据）default: "你确定继续操作吗?default: "你确定继续操作吗?这里实现了普通按钮和确认按钮两种操作按钮功能；（1）自定义操作按钮操作方法传递给子组件失败。注意新组件也要导出后，才能在父组件使用。这样子组件就无需重复定义已有组件参数；
vue 3自定义组件
weixin_44523517的博客
08-27 1293
vue 3自定义组件
Vue3中的组件：组件的定义、组件的属性和事件、组件的Slots和动态组件
网络技术联盟站
07-18 1964
Vue3中定义组件有两种方式：通过对象字面量或通过函数。'在上述代码中，我们定义了一个组件，它有一个template属性，值为一个HTML字符串。这个HTML字符串将作为组件的模板。下面是通过'})在上述代码中，我们使用函数定义了一个组件，该函数接收一个对象作为参数，该对象包含了组件的属性和方法。本文详细介绍了Vue3中的组件，包括组件的定义、组件的使用、组件的属性和事件、组件的Slots和动态组件以及生命周期钩子函数等方面的内容。
vue3自定义组件
weixin_45099012的博客
08-01 3280
vue3自定义组件
Vue2、3自定义封装组件，父子组件传值
devops
12-15 2153
封装好的组件可以被另一个vue页面作为子组件引入。
vue3(六)-基础入门之自定义组件与组件传参、插槽、ref通信
weixin_43520586的博客
12-24 1161
传递参数到父组件；父组件通过自定义事件接收参数。
vue3语法糖添加自定义指令
08-31
在Vue 3中，你可以使用`app.directive`函数来添加自定义指令。下面是一个示例： ```javascript const app = Vue.createApp({}) app.directive('customDirective', { mounted(el, binding) { // 在指令绑定到元素时调用 // 可以在这里操作DOM或添加事件监听器等 }, updated(el, binding) { // 在指令所在组件的VNode更新时调用 // 可以根据需要更新DOM或执行其他操作 }, unmounted(el, binding) { // 在指令从元素上解绑时调用 // 可以在这里清除事件监听器等 } }) app.mount('#app') ``` 在上面的示例中，我们使用`app.directive`函数添加了一个名为`customDirective`的自定义指令。该函数接受两个参数：指令名称和指令选项对象。在选项对象中，我们可以定义三个生命周期钩子函数：`mounted`、`updated`和`unmounted`。这些钩子函数分别在指令绑定到元素、指令所在组件的VNode更新以及指令从元素上解绑时被调用。 通过这种方式，你可以方便地添加自定义指令并在需要的时候执行相应的操作。希望对你有所帮助！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值