vue的v-slot指令使用总结

父组件代码：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    
    <slotdemo> 
      <template v-slot:a>
          this is a 
      </template>
      asdad
    </slotdemo>
   
  </div>
</template>

<script>

import slotdemo from './components/slotDemo.vue'

export default {
  name: 'app',
  components: {
    slotdemo
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件代码

<template >
    <div >
        {{ user.firstName }}

        <slot name="a">
        </slot>
    </div>
     
</template> 
<script>
export default {
    name:'slotdemo',
    data() {
        return {
            user:{
                firstName:'zzz',
            }
        }
    },
}
</script>

实现效果

vue的v-slot指令使用总结

在父组件定义v-slot插槽，可以将父组件定义的模块渲染到子组件，如果父组件需要去展示一些数据需要在父组件的data中写入属性的数据，但是属性名必须与v-slot中的名称相同

以下是在原有基础上修改的代码：

 <slotdemo> 
  
      <template v-slot:a>
          this is a 
          {{a.name}}//新增
      </template>
    </slotdemo>

data() {
    return {
      a:{
        name:'123',
      }
    }
  },

vue的v-slot指令使用总结

相关推荐