标签：bsp .net ops child 部分 default -- code temp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用插槽(slot)</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="root"> <!-- <child content="<p>Dell</p>"></child> --> <!-- 插槽(slot) --> <child> <!-- 父组件内可以传递插槽内容。 --> <h1>Dell</h1> </child> </div> </body> <script> // 使用插槽(slot)，子组件更方便的给父组件传递dom数据。 // 全局组件，子组件 Vue.component(‘child‘, { // props:[‘content‘], // p标签外层多了一个div标签 // template:`<div> // <p>hello</p> // <div v-html="this.content"></div> // </div>` template:`<div> <p>hello</p> <slot>默认内容</slot> </div>` }); var vm = new Vue({ el:‘#root‘ }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用插槽(slot)</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="root"> <child> <!-- 父组件内可以传递插槽内容。 --> <!-- 头部 --> <div class="header" slot="header">header</div> <!-- 尾部 --> <div class="footer" slot="footer">footer</div> <!-- 默认值 --> </child> </div> </body> <script> // 使用插槽(slot)，子组件更方便的给父组件传递dom数据。 // 注意：插槽要取名字，不然调用多次相同内容。具名插槽可以有多个。 // 父组件没有传值是，用默认值。 // 全局组件，子组件 Vue.component(‘child‘, { data:function(){ return{ } }, template:`<div> <slot name="header"></slot> <div class="content">content</div> <slot name="footer"></slot> <slot name="moren"> <h1>default</h1> </slot> </div>` }); var vm = new Vue({ el:‘#root‘ }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的作用域插槽</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <child> <template slot-scope="props"> <h1>{{props.item}} - hello</h1> </template> </child> </div> </body> <script> // 应用场景：子组件做循环，或者某一部分dom应该由外部传递进来的时候就需要用作用域插槽。子组件可以向父组件的作用域传数据。父组件必须用<template slot-scope="props"></template>标签，用slot-scope="props"接收数据。 // 父组件调用子组件的时候，给子组件传递对应的模板。这个插槽必须是<template slot-scope="props">开头</template>和结尾。接收的数据都放在props里面。以什么标签展示，例如h1标签。 Vue.component(‘child‘,{ data:function(){ return { list:[1,2,3,4] } }, // template:‘<div>child</div>‘ // template:`<div> // <ul> // <li v-for="item of list">{{item}}</li> // </ul> // </div>` template:`<div> <ul> <slot v-for="item of list" :item=item>{{item}} </slot> </ul> </div>` }) var vm = new Vue({ el:"#root" }) </script> </html>
标签：bsp .net ops child 部分 default -- code temp
原文地址：https://www.cnblogs.com/c-x-m/p/10011423.html
