vue(2.0) 插槽

 剧名插槽

在被使用组件使用标签slot标签进行挖坑name属性进行标位

   

<template>
  <div class="about">
    <slot name="age">关于</slot>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$route);
  },
};
</script>

 在使用组件使用标签slot属性进行锁定坑标位进行填坑 

<template>标签可以使用 v-solt:名称进行锁定位置

<template>
   <div>
     <About>
         <div slot="age">
         </div>
         <template v-slot:age>
         </template>
     </About>
   </div>
</template>

<script>
  import About from'./About';
export default {
  name: 'Home',
  components: {
    About,
  },
  data() {
    return {
      showValue: true,
      value: '<p>55555</p>',
    };
  },
  methods: {
    chengname() {
    },
  },
  created() {
  },
  mounted() {
  },
  directives: {
    getValue(element, binding) {
      console.log('element', element);
      console.log('element', binding);
    },
  },
};
</script>

作用域插槽 scope 

作用向使用者传递参数 

子组件代码

<template>
  <div class="about">
    <slot name="age" :name='20'>关于</slot>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$route);
  },
};
</script>

<template>
   <div>
     <About>
         <div slot="age">
         </div>
         <template v-slot:age scope='age'>
         </template>
     </About>
   </div>
</template>

<script>
  import About from'./About';
export default {
  name: 'Home',
  components: {
    About,
  },
  data() {
    return {
      showValue: true,
      value: '<p>55555</p>',
    };
  },
  methods: {
    chengname() {
    },
  },
  created() {
  },
  mounted() {
  },
  directives: {
    getValue(element, binding) {
      console.log('element', element);
      console.log('element', binding);
    },
  },
};
</script>

动态构建插槽 v-slot  只能在标签 template 里面进行使用

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- with shorthand -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>