Vue: slot的使用

slot插槽

为组件提供扩展性

插槽定义： 在组件中使用<slot name="jumin"></slot>

<template>
    <div>
        <p>{{userInfo.length}} Titles</p>
        <slot name="jumin" :data="list1"></slot>
        <ul class="movie-list">
            <li v-for="movie in userInfo" :key="movie.id">
                {{movie.title}} - {{movie.year}}
                 <span class="float-right">

                    <a class="imdb" :href="'https://www.imdb.com/find?q=' + movie.title" target="_blank"
                        title="Find this movie on IMDb">IMDb</a>
                    <button @click="btnClick(movie)">点击我将把内容传递给父组件</button>
                    <button @click="fater">访问父组件</button>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Main',
    // props: ['movies']    // 数组写法
    //  对象写法，可以类型限制，设置默认值
    props: {
        // 对象或者数组是default 需要是个方法 
        userInfo: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            // 通过slot 将该data传递给插槽，使用插槽时 就会拥有该data属性
            list1: [1,2,3]
        }
    },
    methods: {
        btnClick: function (arg) {
            // console.log(arg)
            // 发射事件，给父组件, (事件名称, 参数)， 事件名称推荐始终使用 kebab-case 的事件名。
            this.$emit('item-click', arg)
        },
        fater: function () {
            // 访问父组件
            console.log(this.$parent)
        }
    }
}
</script>

<style>

</style>

插槽使用标签中使用 slot="jumin"

<template>
    <div>
        <Nav></Nav>
        <Main :userInfo="movies">
            <!-- slot-scope 将获取到插槽对象 -->
<form method="post" slot="jumin" slot-scope="slot">
    <!-- 获取到插槽定义时绑定的data属性 -->
    <h1>{{slot.data}}</h1>
    Name <input type="text" name="title" autocomplete="off" required>
    Year <input type="text" name="year" autocomplete="off" required>
    <input class="btn" type="submit" name="submit" value="Add">
</form>
        </Main>
        <Foter></Foter>
    </div>
</template>


<script>
import Main from '../components/Main'
import Nav from '../components/Nav'
import Foter from '../components/Foter'


export default {
    name: 'Manager',
    components: {
        Main,Foter,Nav
    },
    data() {
        return {
            movies: [
                {
                    id: 1,
                    title: "西游记",
                    year: "1997"
                }
            ]
        }
    }
}
</script>


<style>

</style>

源码地址： https://gitee.com/zy7y/hello-fast-api-vue