Vue的作用域插槽

Posted llcdxh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的作用域插槽相关的知识，希望对你有一定的参考价值。

一、通常情况下都是父组件传递数据给子组件进行展示的（无法改变子组件的展示方式）；而作用域插槽允许子组件通过slot向父组件传递数据，类似React中的“以函数为子组件”，由父组件决定渲染的内容（包含绑定事件，样式，HTML标签等）；我把数据给你父组件了，你爱怎么处理就怎么处理，极大的提高了灵活性。

二、示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />
        <title>Vue作用域插槽2</title>
    <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
    </head>
    <body>
    <div id="root">
      <my-list :books="books">
        <template slot-scope="scope" slot="book">
          <li>{{scope.book.author}}--{{scope.book.name}}</li>
        </template>
      </my-list>
    </div>
    <script>
      Vue.component(‘my-list‘,{
        props: {
            books: {
                type: Array,
                default: () => []
            }
        },
        template: `
            <ul>
                <slot v-for="item in books" name="book" :book="item"></slot>
            </ul>
        `
      })
      var app = new Vue({
        el: ‘#root‘,
        data: {
          books: [
            { id: 1, author: ‘李四‘, name: ‘《Vue. js 实战》‘ },
            { id: 2, author: ‘王五‘, name : ‘《 javascript 语言精粹》‘ },
            { id: 3, author: ‘张三‘, name :  ‘《 JavaScript 高级程序设计》‘ }
          ]
        }
      })
    </script>
    </body>
</html>

 

以上是关于Vue的作用域插槽的主要内容，如果未能解决你的问题，请参考以下文章

Vue 作用域插槽

[vue3进阶] 6.slot插槽3——作用域插槽

Vue的作用域插槽

细说Vue作用域插槽，匹配应用场景。

语法糖&具名插槽&作用域插槽&混入

Vue2.0—默认插槽具名插槽作用域插槽（二十四）