具名 + 作用域插槽：v-slot:名字="scope"
01-插槽的具名.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
新版本的插槽具名
1. 需要有一个 template
2. v-slot:名
-->
<div >
<el-car>
<!-- 2.6.0 之前的 -->
<!-- <p slot="n1">大众发动机</p> -->
<!-- 2.6.0 之后 v-slot -->
<template v-slot:n1>
<p>大众发动机</p>
</template>
<template v-slot:n2>
<h3 >法拉利</h3>
</template>
<template v-slot:n3>
<h3>宝马</h3>
</template>
</el-car>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('el-car', {
template: `
<div>
<h3>提示</h3>
<slot name='n1'></slot>
<slot name='n2'></slot>
<slot name='n3'></slot>
<button>取消</button>
</div>
`
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
02-插槽的作用域 插槽.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div >
<el-car>
<!-- 老版本 -->
<!-- <p slot-scope="scope">
发动机样式 {{ scope.type }} {{ scope.row.name }}
</p> -->
<template v-slot="scope">
<p>发动机样式{{ scope.row.name }} {{ scope.type }}</p>
</template>
</el-car>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('el-car', {
template: `
<div>
<h3>提示</h3>
<slot :type='type' :row='row'></slot>
<button>取消</button>
</div>
`,
data() {
return {
type: 'EA888',
row: {
name: 'zs'
}
}
}
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
03-具名+作用域插槽-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div >
<el-car>
<!-- <p slot="n1" slot-scope="scope">发动机样式{{ scope.row.name }}</p> -->
<!-- 新版本 -->
<template v-slot:n1="scope">
<p>发动机样式{{ scope.row.name }}</p>
</template>
</el-car>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('el-car', {
template: `
<div>
<h3>提示</h3>
<slot name='n1' :row='row'></slot>
<button>取消</button>
</div>
`,
data() {
return {
type: 'EA888',
row: {
name: 'zs'
}
}
}
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
03-具名+作用域插槽-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div >
<che>
<template v-slot:n1="scope">
<div>{{scope.tp}}</div>
<div>{{scope.row}}</div>
</template>
<template v-slot:n2="scope">
<!-- app组件的msg -->
<h3>{{msg}}</h3>
<!-- che组件的msg -->
<h3>{{scope.msg}}</h3>
</template>
</che>
</div>
<script src="./vue.js"></script>
<!-- <script src="./node_modules/vuex/dist/vuex.js"></script> -->
<script>
Vue.component('che', {
template: `
<div>
<slot name="n1" :tp="type" :row="row">11</slot>
<slot name="n2" :msg="msg">22</slot>
<slot name="n3">33</slot>
</div>
`,
data() {
return {
msg: 'che组件的msg',
type: 'EA888',
row: {
name: 'zs'
}
}
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'app组件的msg'
}
})
</script>
</body>
</html>
