1. In createApp, if you want to pass parameters, consider render

Const app = createApp(XXX). Mount ('div') = const app = createApp({render(){return h(XXX,{},{})}})Copy the code

H at this point returns a virtual node, abbreviated vNode: a common object that contains information describing to Vue what kind of node it should render on the page, including descriptions of all child nodes.

H accepts three parameters: type, props, and children

  • typeIs the name of the component to render
  • propsThat’s the props or attrs and events in the component,
  • childrenIt mainly includes some slots for internal use of components, which can be explained in the official documentation below

Example :(herecontent,titleIs the declaration slot, so write inchildrenInside, the event is written inpropsThe inside)

Const showDialog () = = > {openDialog ({title: "title", content: "hello", yes: () = > {the console. The log (' yes')}, no: () = > {the console. The log (' no ') },closeOnclickOverlay:()=>{}}) } ------------------------------------- const {content,title,yes,no,closeOnclickOverlay} = options; const div = document.createElement('div') const app = createApp({render(){ return h(Dialog,{isvisible:true, 'onUpdate:isvisible':(newVisible)=>{ if(newVisible ===false){ //@ts-ignore app.unmount(div) div.remove() } }, yes,no,closeOnclickOverlay:false },{content,title}) }}) app.mount(div)Copy the code

App.mount (div) must be separated from createApp because.mount() returns no value

2. Determine the types of subcomponents in nested components

Since the nested components were not shown at first, we print context.slots.default()

setup(props,context){ console.log({... context.slots.default()}); const defaults = context.slots.default() console.log(defaults[0].type ===Tab); return {defaults} }Copy the code

This returns a virtual node as above, and the type of type is Tab, which means that the Tab component is a virtual node as well as an ordinary object (see summary of H above).

To render internal components, you can bind dynamic components with
, which implements a slot for inserting other components in the child, if the child is the last

3. To obtain the width, height and position of the label, run thegetBoundingClientRect()If ref is used in the label, please add it to the end.valueIn this case, the tag is obtained

console.log(selectedItem.value);
console.log(selectedItem); 
Copy the code

const {width,height,top,left} = el.getBoundingClientRect()
Copy the code

4. ES6 grammar

  1. Renaming method of destructor assignment
const {left:left1} = selectedItem.value.getBoundingClientRect()
const {left:left2} = container.value.getBoundingClientRect()
Copy the code

2… Extension operators and residual operators

  • Extended operator
function addFun(x, y, z) { return x + y + z; } var args = [1, 2, 3]; addFun(... args);Copy the code
  • Residual operator
let demoFun = function(argA, ... args) { console.log(argA); console.log(args) } demoFun(1, 2, 3); // 1/2Copy the code