439 vue2.6 slot
Posted jianjie
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了439 vue2.6 slot相关的知识，希望对你有一定的参考价值。
01-插槽的具名.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
新版本的插槽具名
1. 需要有一个 template
2. v-slot:名
-->
<div id="app">
<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 id="app">
<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-具名+作用域插槽.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<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>
以上是关于439 vue2.6 slot的主要内容，如果未能解决你的问题，请参考以下文章