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