console.log('hello script setup') 1. 2. 3. 普通的只会在组件被首次引入的时候执行一次,里的代码会在每次组件实例被创建的时候执行。 2. data和methods 里声明的变量和函数,不需要return暴露出去,就可以直接在template使用 import { ref, reactive } from 'vue' // 普通变量 const msg = 'Hello!' /...
在Vue3中,可以使用export default来定义组件的name。例如: ```javascript export default { name: 'MyComponent' } ``` 这种方式是最传统的定义组件name的方法,也是最易于理解和使用的一种方式。对于简单的组件,这种方法也是最有效的。 3. 使用组合式API 另一种定义组件name的方法是使用组合式API。在setup函数中...
在Vue3的模式下,往往会忽略 name; 但是在keep-alive等情况下又需要用到! 方法1: exportdefault{ name:"my-component"} /*业务代码*/ 方法2: //改方法需要vue3.3+ defineOptions({ name:"my-component"}) 方法3:这里主要是在动态加载路由时 const comp=import(`@/component.vue`) comp.then(res=>{res....
import { reactive, ref } from'vue'//ref声明响应式数据,用于声明基本数据类型const name = ref('Jerry')//修改name.value = 'Tom'//reactive声明响应式数据,用于声明引用数据类型const state =reactive({ name:'Jerry', sex:'男'})//修改state.name = 'Tom' 三、method <template>//调用方法按钮 <...
{ componentName }}</div> </template> <script setup> import { ref, getCurrentInstance } from 'vue'; // 获取当前组件实例 const instance = getCurrentInstance(); // 从实例中获取组件名称 const componentName = ref(instance?.type.name || 'Unknown Component'); </script...
// 普通 , 在模块范围下执行(只执行一次) runSideEffectOnce() // 声明额外的选项 export default { name: 'ComponentName', // 组件重命名 inheritAttrs: false, customOptions: {} } // 在 setup() 作用域中执行 (对每个实例皆如此) 16. v-memo新指令该指令与v-once类似,v-once是只渲染一次...
在中无法声明 name，所以必须再写一个普通的 script 来声明 name exportdefault{name:'CustomName',}/...
2版本setup语法糖 defineExpose 不需要引入可以直接使用 defineExpose({ // 把 name 属性 和fn...
<component:is="dom[tabHtml]"></component> import import{shallowReactive}from'vue'importHomefrom'@/components/home/Home.vue'; js const tabHtml = ref(''); //设置不同组件import引入 const dom = shallowReactive<any>({ Home, }) //切换
在compileScript函数中首先使用ScriptCompileContext类new了一个ctx上下文对象,在new的过程中将compileScript函数的入参sfc传了过去,sfc中包含了模块的位置信息以及源代码。 ctx.scriptSetupAst是模块中的code代码字符串对应的AST抽象语法树。 接着就是遍历AST抽象语法树的内容...