2019-02-15 vue组件基础篇5

• 作用域插槽续
  此例的用意主要是介绍作用域插槽的用法
  1.允许组件自定义应该如何渲染列表每一项。
  2.作用域插槽的使用场景就是既可以复用子组件的slot，又可以使slot内容不一致。

<div id="app">
        // 这里的:books是my-list组件props中的books
        <my-list :books="books">
        // "books"是vue的app实例中data的一个属性
            <template slot="book" scope="props">
                <li>{{ props.bookName }}</li>
            </template>
        </my-list>
</div>
<script>
        Vue.component('my-list', {
            props: ['books'],
            template: ' \
            <ul> \
                <slot name="book" v-for="book in books" :book-name="book.name"></slot> \
            </ul> \
            '
        });
        var app = new Vue({
            el: '#app',
            data: {
                books: [
                    { name: '《Vue.js实战》'},
                    { name: '《JavaScript语音精粹》'},
                    { name: '《JavaScript高级程序设计》'},
                ]
            }
        })
</script>

props回顾

<div id="app">
    <ceshi :message="parentMessage"></ceshi>
</div>
<script>
    Vue.component('ceshi', {
        // 声明在prop中的变量可以引用父元素的数据
        props: ['message'],
        template: '<div>{{ message }}</div>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            parentMessage: 'Hello World'
        }
    })
</script>