Vue插槽slot的使用
2. 具名插槽
先在子组件对应分发slot标签里，添加name=”name名” 属性，其次父组件在要分发的标签里添加 slot=”name名” 属性，然后就会将对应的标签放在对应的位置
<body> <div id="app"> <cpn><span slot="center">标题</span></cpn> </div> <template id="cpn"> <div> <!-- 三个插槽 --> <slot name="left"><span>左边</span></slot> <slot name="center"><span>中间</span></slot> <slot name="right"><span>右边</span></slot> <slot>没名字</slot> </div> </template> <script src="../vue.js"></script> <script></script> <script> new Vue({ el: '#app', data: { message: '你好啊 李银河！' }, components: { cpn: { template: '#cpn' } } }) </script> </body>
3 编辑作用域
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译
<body> <div id="app"> {{ message }} <cpn v-show="isShow"></cpn> </div> <template id="cpn"> <div> <h2>我是子组件</h2> <p>我是内容</p> <button v-show="isShow">按钮</button> </div> </template> <script src="../vue.js"></script> <script></script> <script> new Vue({ el: '#app', data: { message: '你好啊 李银河！', isShow: true }, components: { cpn: { template: "#cpn", data () { return { isShow: false } } } } }) </script> </body>
4 解构slot-scope
在子组件中插槽中通过：data绑定了数据，父组件可以通过slot-scope="name"来取得子组件作用域插槽：data绑定的数据，name的名称可以随便取，用来定义对象来代替取到的data数据。
<body> <div id="app"> {{ message }} <cpn></cpn> <cpn> <!-- 目的是获取子组件的pLanguages vue2.5.x以下需要使用模板 以上不用 --> <template slot-scope="slot"> <span>{{slot.data.join('-')}}</span> </template> </cpn> <cpn> <template slot-scope="slot"> <span>{{slot.data.join('*')}}</span> </template> </cpn> </div> <template id="cpn"> <div> 我是子组件 <slot :data= "pLanguages"> <ul> <li v-for="item in pLanguages">{{item}}</li> </ul> </slot> </div> </template> <script src="../vue.js"></script> <script></script> <script> new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 message: '你好啊 李银河！' }, components: { cpn: { template: "#cpn", data () { return { pLanguages: ['js', 'go', 'python', 'swift'] } } } } }) </script> </body>
