<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <box> <p>ppppp</p> <p slot="h4">h4</p> <h4 slot="h4">h4</h4> <p slot="h5">h5</p> <h5 slot="h5">h5</h5> </box> </div> </div> <script> Vue.component('box', { template: [ '<div>', '<div>', '<slot></slot>', '</div>', '<div>', '<slot></slot>', '</div>', '<div>', '<slot></slot>',, '</div>', '</div>', ].join('') }); new Vue({ el: '#app1' }); </script>
没有声明 name 属性的 <slot> 标签，是为组件的内容节点中没有声明 slot 属性的标签而占位；
声明了 name 属性的 <slot> 标签，是为组件的内容节点中与之相等 slot 属性的标签而占位；
多个标签应用了相同的 slot 属性也会有效；
11. <slot> 标签回传数据给内容节点：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <box > <template scope="props"> <span>{{props.text}}</span> </template> </box> </div> </div> <script> Vue.component('box', { template: '<div><slot v-for="i in items" :text="i"></slot></div>', data: function (){ return { items: [0,1,2,3,4] } } }); new Vue({ el: '#app1' }); </script>
首先，数据是组件内提供的，但数据的布局方式由实例调用组件时决定；
在组件的内容节点内，必须使用 <template> 标签包含着要渲染的子元素，并且定义 scope="props" 属性，而 <template> 标签内则是 props 对象的作用域上下文；
props 内自动含有 <slot> 标签中的属性，例如事例中的 text 属性，则可直接使用 props.text 访问到 text 属性的值；
当然，也可以结合 <slot> 使用，而 <template slot="header"> 即可；
<template> 标签为 vue 保留的标签，实际只是个占位符；
12. 动态切换组件：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <component :is="view"></component> <button @click="view = 'inlinebox'">change</button> </div> </div> <script> Vue.component('box', { template: '<div>box</div>', }); Vue.component('inlinebox', { template: '<div>inlinebox</div>' }); new Vue({ el: '#app1', data: { view: 'box' } }); </script>
<component> 标签为 vue 保留的标签，实际只是个占位符；
is 属性可指定组件标签名，也可绑定动态变量；
13. 在实例中访问子元素对象：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <box ref="box1"></box> </div> </div> <script> Vue.component('box', { template: '<div>box</div>', }); new Vue({ el: '#app1', mounted: function() { console.log(this.$refs); } }); </script>
只要为组件指定 ref 属性，实例中则会在 $refs 中访问到组件的对象；
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: