怎么把组件挂载到body上_Vue2和Vue3使用上的区别在这，耗子尾汁！

点击上方“程序员黑叔”，选择“置顶或者星标”

你的关注意义重大！

作者：王立发

https://zhuanlan.zhihu.com/p/267040951

Vue 3 的 Template 支持多个根标签，Vue 2 不支持
Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
createApp(组件)，new Vue({template, render})
v-model代替以前的v-model和.sync
vue3中v-model的用法

要求:
3.1. props属性名任意，假设为x
3.2. 事件名必须为"update:x"
效果：

"y" @update:value="y=$event"/>vue2中的写法"y"/>vue3中的写法"y"/>

4. context.emit

新增context.emit，与this.$emit(vue3中只能在methods里使用)作用相同

context.emit用法

import {SetupContext } from 'vue'setup(props: Prop, context: SetupContext) {    const toggle = () => {      context.emit('input', !props.value)    }    return {toggle}}

5. Vue3中的属性绑定

默认所有属性都绑定到根元素
使用inheritAttrs: false可以取消默认绑定
使用attrs或者context.attrs获取所有属性
使用v-bing="$attrs"批量绑定属性
使用 const {size, level, ...rest} = context.attrs 将属性分开

5.1 使用场景
在vue2中我们在父组件绑定click事件，子组件必须内部触发click，而vue3中在父组件绑定子组件的根元素上也会跟着绑定

ButtonDemo.vue

<Button @click="onClick" @focus="onClick" size="small">你好Button>

          </div>

        setup() {

              const onClick = () => {

                console.log("aaa")

              }

              return {onClick}

            },

Button.vue

<div><button><slot/>button>div></template>

上面的代码Button的click事件会在根元素div上绑定，如果我们要指定click的区域为button元素的话我们就需要使用inheritAttrs

Button.vue

<div><button v-bind="$attrs"><slot/>button>div></template>

怎么把组件挂载到body上_Vue2和Vue3使用上的区别在这，耗子尾汁！相关推荐

vue 父子组件组件挂载组件通信 slot插槽
目录 vue 父子组件挂载父组件往子组件中传值子组件向父组件传值 this.$emit() this.$refs 父组件可以通过它直接引用注册过的子组件DOM中的数据插槽默认插槽具名插槽 v ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
vue拿到某个节点的属性_vue实现将某个dom元素或组件挂载到根节点
在写手机端的时候经常用到tab,tab切换一般都是transition滑动的,如果此时我们用position:fixed定位会发现,元素定位并不是我们想象中的相对浏览器定位,这是因为fixed定位会被 ...
Vue3 + Element-Plus upload组件封装限制上传数量，再次上传则覆盖
文章目录一.需求描述二.实现效果三.源码一.需求描述在 Vue3 项目中使用 Element Plus 封装上传组件.限制上传文件的大小.实现拖拽上传.限制文件只能上传一个,再次上传则覆盖原 ...
html 前端优化上传视频,前端上传组件Plupload使用---上传大视频(分片上传)
上传视频到服务器 1.引入js插件: 2.html页面如图: 上传视频: 上传视频支持AVI.wma.rmvb.rm.flash.mp4.mid.3GP等格式 3.js代码 $(function ( ...
ftp服务器批量上传文件,bat批量上传ftp文件到服务器
bat批量上传ftp文件到服务器内容精选换一换 CDM支持周期性自动将新增文件上传到OBS,不需要写代码,也不需要用户频繁手动上传即可使用OBS的海量存储能力进行文件备份.这里以CDM周期性备份F ...
html web上传文件原理,Web上传文件的原理及实现
本文为原创,如需转载,请注明作者和出处,谢谢! 现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Stru ...
文件上传 java web_JavaWeb 文件上传下载
1. 文件上传下载概述 1.1. 什么是文件上传下载所谓文件上传下载就是将本地文件上传到服务器端,从服务器端下载文件到本地的过程.例如目前网站需要上传头像.上传下载图片或网盘等功能都是利用文件上传下 ...
SpringCloud 应用在 Kubernetes 上的最佳实践 — 线上发布（优雅上下线）
作者 | 骄龙导读:本篇是<SpringCloud 应用在 Kubernetes 上的最佳实践>系列文章的第八篇,主要介绍了如何做到流量的无损上/下线.更多相关文章阅读可查看文末. 前言 ...

怎么把组件挂载到body上_Vue2和Vue3使用上的区别在这，耗子尾汁！

4. context.emit

5. Vue3中的属性绑定

怎么把组件挂载到body上_Vue2和Vue3使用上的区别在这，耗子尾汁！相关推荐

最新文章

热门文章