1.无名插槽<body><div id="app">123</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册组件Vue.component("my-component",{ template:"<span>Hello World!</span>"})new Vue({el:"#app", template:"<my-component>123</my-component>"})</script></body>

结果显示的是：Hello World!（组建中写的123并不显示）

当使用插槽时

<body><div id="app">123</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册组件Vue.component("my-component",{ template:"<span>Hello World!<slot></slot></span>"})new Vue({el:"#app",template:"<my-component>123</my-component>"})</script></body>

结果显示的是：Hello World!123（组建中写的123显示了）

有<slot></slot>插槽的时候才可以显示自己组件中写的内容。

2.具名插槽

<body><div id="app"><my-component><h1 slot="girl">我是女孩</h1><h1 slot="boy">我是男孩</h1><span slot>123</span></my-component></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册组件Vue.component("my-component",{template:`<div><slot name="girl"></slot><slot name="boy"></slot><slot></slot></div>`})new Vue({el:"#app"})</script></body>

显示结果：

我是女孩

我是男孩

123

3.作用域插槽

<body><div id="app"><my-component><template slot-scope="a">{{a}}</template></my-component></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册组件Vue.component("my-component", {template: `<div><slot hah="hi"></slot></div>`})new Vue({el: "#app"})</script></body>

显示结果为：

{ "hah": "hi" }

转载于:https://www.cnblogs.com/150536FBB/p/11362220.html

vue中的slot插槽相关推荐

深入理解vue中的slot与slot-scope （简单易懂）
走在前端的大道上插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于 ...
Vue 中的作用域插槽
作用域插槽 <div id="root"><child></child> </div> Vue.component('child', ...
深入理解vue中的slot与slot-scope
写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生&qu ...
slot属性值_深入理解vue中的slot与slot
作者/云荒杯倾写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者 ...
怎样理解vue中的slot
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...
Vue中的solt插槽
一.概念: 插槽就是父组件往子组件中插入一些内容. 二.插槽的种类: 有三种方式,默认插槽,具名插槽,作用域插槽默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件 ...
Vue中的slot和slot-scope使用
slot是vue中的插槽,它包括匿名插槽(没name属性)和具名插槽(有name属性) 一:插槽的作用 slot的作用是,让父组件中引用子组件时,包含的内容不被子组件的内容替代,其在父组件中包含的内容 ...
Vue 自定义组件 —— slot插槽
父组件向子组件传递带数据的标签,当一个组件有不确定的结构时, 就需要使用 slot 技术,注意:插槽内容是在父组件中编译后, 再传递给子组件的. 一.默认插槽 <div class=" ...
微信小程序中使用slot插槽
1.slot: 组件的插槽是为了让我们封装的组件更具有扩展性让使用者可以决定组价内部的一些内容到底展示什么例如移动网站中的导航栏 2. 单个插槽的使用: 注意: 在slot组件页面中slot可以是 ...

vue中的slot插槽

我是女孩

我是男孩

vue中的slot插槽相关推荐

最新文章

热门文章