这样我们就完成了自己的 UI 组件库的发布. 接下来我们可以在任何需要使用到该组件库的项目中使用: npm install --save @ssthouse/personal-component-set 1. 然后在index文件 (如src/main.js) 中引入该组件库: import '@ssthouse/personal-component-set' 1. 接下来我们就
按照常理来说要import导入子组件,那么在子组件里面肯定要写export才可以,但是在子组件local-child.vue中我们没有写任何关于export的代码。 答案是在父组件import导入子组件触发了vue-loader或者@vitejs/plugin-vue插件的钩子函数,在钩子函数中会将我们的源代码单文件组件SFC编译成一个普通的js文件,在js文件中export d...
子组件 MySon :<template> </template>父组件的 h 函数: import MySon from'./son.vue'h(MySon, {//子组件 $emit 传递函数start(data) { console.log(data); }, }) 如今vue3 的写法(绑定的事件名需要加多一个on前缀): 子组件:<template> </template>父组件的 h 函数: h(TableActionBut...
1 创建 在Vue3中是通过createApp来创建一个组件实例的,所以我们引入createApp和Modal.vue,创建一个弹框组件实例。 createApp的第二个参数就可以让我们传递参数给弹框组件的props属性 我们定义一个openModal的方法,并且梳理下这个方法中要实现的逻辑,最后导出了这个方法供其他地方调用。 import { createApp } from '...
可以看到,render函数接收一个参数createElement,然后Vue 通过建立一个虚拟DOM(VNode)来追踪自己要如何改变真实DOM。 createElement函数中使用模板中的那些功能,它接受的参数如下: // @returns {VNode} createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项对象,或者 ...
import{App,createApp}from"vue";importPasswordDialogfrom"./index.vue";// 这个index.vue就是我们前面实现的弹窗组件exportasyncfunctionshowPasswordDialog():Promise<RuleForm>{returnnewPromise((resolve,reject)=>{letmountNode=document.createElement("div");letdialogApp:App<Element>|undefined=createApp(Password...
}//创建一个挂载容器const parentNode = document.createElement('div') document.body.appendChild(parentNode)//挂载组件confirmInstance.mount(parentNode) }) } exportdefaultconfirm 然后就是使用这个组件了,我这里只是局部的调用, 1 2 3 4 5 6 7
(createElement: CreateElement, err: Error): VNode; staticRenderFns?: ((createElement: CreateElement) => VNode)[]; beforeCreate?(this: V): void; created?(): void; beforeDestroy?(): void; destroyed?(): void; beforeMount?(): void; mounted?(): void; beforeUpdate?(): void; updated?(): ...
const loadingDom=document.createElement('div',{calss:'loading'})el.append(loadingDom) 1. 2. 这样好难受啊,我不想写原生 dom ,能不能写个组件渲染到指令里呢? 我想起了我之前看到的几个 vue 接口, h函数,也就是 vue 提供的创建 vNode 的函数 ...
在mountElement方法中,代码首先会进入到hostCreateElement方法中,根据上图我们也知道,hostCreateElement方法实际上就是调用了document.createElement方法创建了Element并返回,但是有个点可以提的是,这个方法在packages/runtime-dom/src/nodeOps.ts,我们之前调试的代码都在packages/runtime-core/src/renderer.ts。这是因为vue...