名字:{{ scope.name }} 职业:{{ scope.occupation }} </Child> </template> import { ref } from 'vue' import Child from './components/Child.vue' const list = ref([ { name: '雷猴', occupation: '打雷'}, { name: '鲨鱼辣椒', occupation: '游泳'}, { name: '蟑螂恶霸', occupati...
-- v-slot="{scope}" 子组件返回的每一项数据 --> <Child v-slot="{ scope }" :arr="arr"> 名字:{{ scope.name }} 年龄:{{ scope.age }} 爱好:{{ scope.like }} </Child> </template> import { reactive } from 'vue' import Child from './child.vue' const arr = reactive([ ...
', }, // prettier-ignore types: [ { value: "feat", name: "特性: ✨ 新增功能", emoji: ":sparkles:" }, { value: "fix", name: "修复: 修复缺陷", emoji: ":bug:" }, { value: "docs", name: "文档: 文档变更", emoji: ":memo:" }, { value: "style", name: "格式: 代码...
parentComponent, parentSuspense,namespace, slotScopeIds, optimized) => {letel; el = vnode.el=hostCreateElement(vnode.type);hostSetElementText(el, vnode.children);setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent); }; 从上面的代码可以看到在mountElement函数中首先会执行hostCreateElem...
<slot name="item"/> 作用域插槽为子组件 <slot> 绑定属性,传递数据给父组件,父组件通过 v-slot:xxx="props" 接收子组件传递的属性 作用域插槽 旧语法 1 2 3 4 5 6 7 8 9 10 11 12 13 // 父组件 爱old {{ props.name }}真是太好了 // 子组件 <slot name="love"v-bind="{ ...
{"name":"@my-vue/shared","version":"1.0.0","description":"@my-vue/shared","main":"dist/shared.cjs.js","module":"dist/shared.esm-bundler.js"} 注意name 字段的值,我们使用了一个 @scope 作用域,它相当于 npm 包的命名空间,可以使项目结构更加清晰,也能减少包的重名。
: (ComponentOptions<Vue> | typeof Vue)[]; name?: string; // TODO: support properly inferred 'extends' extends?: ComponentOptions<Vue> | typeof Vue; delimiters?: [string, string]; comments?: boolean; inheritAttrs?: boolean; } 在后面的定义中可以看到,该类型被 @vue/composition-api 引用...
{"name":"@my-vue/shared","version":"1.0.0","description":"@my-vue/shared","main":"dist/shared.cjs.js","module":"dist/shared.esm-bundler.js"} 注意name字段的值,我们使用了一个@scope作用域,它相当于npm包的命名空间,可以使项目结构更加清晰,也能减少包的重名。
v-slot 的语法,简化 slot、slot-scope 作用域插槽的功能,相比更加强大,代码效率更高。 二、匿名插槽 当组件中只有一个插槽的时候,可以不设置 slot 的 name 属性,v-slot 后可以不带参数,但是 v-slot 在没有设置 name 属性的插槽口也会带有隐含的 “default”。