Vue插槽
具名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id='app'>
<div>
<render-test>
<template slot='name'>
<span>关羽</span>
</template>
<template slot='gender'>
<span>男</span>
</template>
<template slot='wuqi'>
<span>青龙偃月刀</span>
</template>
<template slot='country'>
<span>蜀国</span>
</template>
</render-test>
</div>
</div>
<script>
const render_1={
template:`
<div>
<span>三国人物:</span><br/>
姓名：<slot name='name'></slot>
性别：<slot name='gender'></slot>
武器：<slot name='wuqi'></slot>
国家：<slot name='country'></slot>
</div>
`
}
var app=new Vue({
el:'#app',
data(){
return {
message:'渲染函数'
}
},
components:{
'render-test':render_1,
}
})
</script>
</body>
</html> 作用域插槽
作用域插槽的做法，域porp的用法正好相反，props 父组件往子组件传入数据
作用域插槽，就是让子组件的数据发送给父组件，这个地方有点可惜的是，它不支持多个插槽，也就是说一个子组件，只能被父组件插入一个作用域插槽，可以有多个普通插槽，或者作用域插槽
//作用域插槽基础用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id='app'>
<div>
<render-test>
<template slot-scope='xxx'>
{{xxx.user.firstName}}
</template>
</render-test>
</div>
</div>
<script>
const render_1={
template:`
<div>
<span>三国人物:</span><br/>
姓名：<slot :user='user'></slot>
</div>
`,
data(){
return{
user:{
firstName:'guan'
}
}
}
}
var app=new Vue({
el:'#app',
data(){
return {
message:'渲染函数',
}
},
components:{
'render-test':render_1,
}
})
</script>
</body>
</html>
//这里面的xx是个名字，随意起。一般是scope 结果：
作用域插槽和具名插槽一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id='app'>
<div>
<render-test>
<template slot-scope='xxx'>
{{xxx.user.firstName}}
</template>
<template slot="country">
蜀国
</template>
</render-test>
</div>
</div>
<script>
const render_1={
template:`
<div>
<span>三国人物:</span><br/>
姓名：<slot :user='user'></slot>
国家：<slot name='country'></slot>
</div>
`,
data(){
return{
user:{
firstName:'关羽'
}
}
}
}
var app=new Vue({
el:'#app',
data(){
return {
message:'渲染函数',
}
},
components:{
'render-test':render_1,
}
})
</script>
</body>
</html> 作用域插槽应用场景，子组件往父组件传入数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id='app'>
<div>
<render-test>
<template slot-scope='scope'>
{{scope.selected_parent}}
</template>
<template slot="country">
蜀国
</template>
</render-test>
</div>
</div>
<script>
const render_1={
template:`
<div>
<span>三国人物:</span><br/>
<select v-model='selected'>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
国家：<slot name='country'></slot>
被选中的值：<slot :selected_parent='selected'></slot>
</div>
`,
data(){
return{
user:{
firstName:'关羽'
},
selected:''
}
}
}
var app=new Vue({
el:'#app',
data(){
return {
message:'渲染函数',
}
},
components:{
'render-test':render_1,
}
})
</script>
</body>
</html> 结果：
不过不要原谅腾讯
