本文主要是介绍vue slot与slot-scope示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
注意：以下示例以最新版本vue为主，最低需要2.6.0版本
一、具名组件简单示例
hello world
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="js_app"><foo><template slot="title"><strong>{{ msg }}</strong></template></foo>
</div>
<!-- 模板 -->
<script type="x-template" id="foo"><div><slot name="title"></slot></div>
</script><script>// 局部组件var Foo = {template: '#foo'}var app = new Vue({el: '#js_app',data: {msg: 'hello world'},components: {foo: Foo}})
</script>
template模板官方使用说明：https://cn.vuejs.org/v2/api/#template
二、作用域插槽slot-scope
slot-scope就是把组件内的数据拿出来在模板里渲染（实现子父组件通信），名称可以为任意， 也可以直接使用解构赋值
姓名：tom 年龄：22
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="js_app"><foo><template slot="title" slot-scope="any"><strong>{{ msg }}</strong><ul><li v-for="(v, k) in any.list" :key="k">姓名：{{ v.name }} 年龄：{{ v.age }}</li></ul></template></foo>
</div>
<!-- 模板 -->
<script type="x-template" id="foo"><div><slot name="title" :list="list"></slot></div>
</script>
<script>
// 局部组件
var Foo = {data: function() {return {list: [{name: 'tom', age: 22}]};},template: '#foo'
}var app = new Vue({el: '#js_app',data: {msg: 'hello world'},components: {foo: Foo}
})
</script>
slot-scope官方使用说明：https://cn.vuejs.org/v2/guide/components-slots.html#%E5%B8%A6%E6%9C%89-slot-attribute-%E7%9A%84%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD
欢迎关注：http://fenxianglu.cn/
这篇关于vue slot与slot-scope示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
