slot插槽

  1. <body>
  2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
  3.     <div id='myApp'>
  4.         <!-- 在组件标签中间写的内容默认不渲染, 因为这些数据会被传入子组件由子组件渲染, 子组件模板中使用slot标签接收这些数据 -->
  5.         <my-com>这是子组件</my-com>
  7.         <!-- 组件标签通过插槽传值,可以传递任意标签结构 -->
  8.         <my-com>
  9.             <ul>
  10.                 <li>111</li>
  11.                 <li>222</li>
  12.                 <li>333</li>
  13.             </ul>
  14.         </my-com>
  15.     </div>
  16.     <!-- 组件模板 -->
  17.     <template id='myTem'>
  18.         <div>
  19.             <!-- slot标签叫做插槽, 可以接收组件标签中间写的数据 -->
  20.             <slot></slot>
  21.             <hr>
  22.             <!-- 每一个slot都会渲染一次插槽数据 -->
  23.             <slot></slot>
  24.         </div>
  25.     </template>
  26.     <script>
  27.         Vue.component('myCom', {
  28.             template: '#myTem',
  29.             // 组件对象中拿不到slot插槽数据, 无法对插槽数据进行监听和修改
  30.         })
  31.         new Vue({
  32.             el: '#myApp',
  33.             data: {
  35.             }
  36.         })
  37.     </script>
  38. </body>

具名插槽

  1.        slot标签添加name属性叫具名插槽, 可以接收slot属性相对应的标签, 具名插槽可实现插槽数据的拆分,并插入不同的位置
  1. <body>
  2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
  3.     <div id='myApp'>
  4.         <my-com>
  5.             <h1 slot="myName">{{name}}</h1>
  6.             <h2 slot="myage">{{age}}</h2>
  7.         </my-com>
  8.     </div>
  9.     <!-- 组件模板 -->
  10.     <template id='myTem'>
  11.         <div>
  12.             父组件中的name: <slot name="myName"></slot>
  13.             父组件中的age:  <slot name="myage"></slot>
  14.         </div>
  15.     </template>
  16.     <script>
  17.         Vue.component('myCom', {
  18.             template: '#myTem',
  19.             data(){ 
  20.                 return{
  22.                 }
  23.             }
  24.         })
  25.         new Vue({
  26.             el: '#myApp',
  27.             data: {
  28.                 name : "张三",
  29.                 age: 20
  30.             },
  31.             created() {
  32.                 // 插槽传值, 父组件数据更新后,子组件会同步更新
  33.                 setTimeout(() => {
  34.                     this.name = "李四",
  35.                     this.age = 30
  36.                 }, 1000);
  37.             },
  38.         })
  39.     </script>
  40. </body>