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>
结果: