vue2 component slot

最新推荐文章于 2024-03-22 16:42:47 发布

fyinthesky

最新推荐文章于 2024-03-22 16:42:47 发布

阅读量272

点赞数

分类专栏： vue2 文章标签： vue2 component slot

本文链接：https://blog.csdn.net/fyinthesky/article/details/87976878

版权

vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> x</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.bg_color_odd{
background-color:#0fa367;
}
.bg_color_even{
background-color:#f1f309;
}
.demo-alert-box{
background-color:#ff9931;
}
</style>

</head>
<body>
<h1>component</h1>
   <h2> slot</h2>
<hr>
https://www.cnblogs.com/cisum/p/9618346.html
   <div id="app">
       <alert-box alert-am="abcd">
       <alert-am alertmessage="cde"></alert-am>
       </alert-box>

<named-slot>
           <span slot='first'>slot first .</span>
           <br>
           <span slot='second'>slot second .</span>
       </named-slot>

<todo-list v-bind:todos="todos">

       <template slot-scope="scope">
<p>ALL：{{JSON.stringify(scope)}}</p>
               <p>K:{{scope.k}}</p>
<p>V:{{scope.v}}</p>

</template>

       </todo-list>

</div>



<script type="text/javascript">


   Vue.component('named-slot', {
       template: `
           <div class="demo-alert-box">
           <strong>named-slot!</strong>
           <slot name='first'></slot>
           <slot name='second'></slot>
           </div>
       `
       })

   Vue.component('todo-list', {
       template: `
           <ul>
           <li v-for="(k,v) in todos" >
               <slot :k="k" :v="v" ></slot>
           </li>
           </ul>
       `,
       props:['todos']
       })


Vue.component('alert-box', {
       template: `
           <div class="demo-alert-box">
           <strong>Error!</strong>
           <slot></slot>
           </div>
       `
       })
   Vue.component('alert-am', {
   props:['alertmessage'],
       template: `
           <p><strong>{{alertmessage}}</strong></p>
       `
       })

var app = new Vue({
el: "#app",
data:{
               xmessage: 'ABC'   ,
               postFontSize:1,
               isToggle:true   ,
               todos:{1:'A',2:'B',3:'C'}
},
           methods:{

           }
})





</script>
</body>
</html>

fyinthesky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2 component slot

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫