vue的v-slot指令使用总结

本文主要是介绍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>

实现效果

在父组件定义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指令使用总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---