vue中solt插槽的基本使用
时间：2023-05-06 06:59:41 阅读：217914 作者：1821
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"><!-- 第二步：要使用这个插槽的话就直接在组件的标签里面嵌套在插槽里面放什么内容就可以了--><!-- 但是你整体看的时候发现其实只是小部分不一样的，大部分都是显示按钮的时候 就可以在创建插槽的时候给一个默认值，当不给插槽中放东西的时候就会直接显示默认的内容了 当给了插槽显示的东西，默认值就会被覆盖。 这样就减少了代码的冗余性。--> <cpn><button>按钮</button></cpn> <cpn><span>我是文本</span></cpn> <cpn><i>我是i标签</i></cpn> <cpn></cpn> <cpn></cpn> <cpn><!-- 插槽的用法2 像下面这种情况的话他就会将所有内容替换到插槽中，不存在覆盖的问题--> <i>我是i标签</i> <div>我是div标签</div> <p>我是p标签</p> </cpn> <cpn><button>按钮</button></cpn> <cpn></cpn></div><template id="cpn"> <div> <h2>我是组件</h2> <p>我是组件，哈哈哈</p> <!--这是插槽：就是预留空间，在每次使用的时候需要往这个预留空间里面放到底需要显示的是什么。 他的作用就是： 1、是我们的组件更加具有扩展性 2、让使用者可以决定组件内部的一些内容到底显示一些什么--><!-- 第一步就是要组件中创建一个这样的插槽的标签--><!-- <slot></slot>--><!-- 插槽的用法1 这里的插槽就是设置了默认值--> <slot><button>按钮</button></slot> </div></template><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: { message: '你好啊！！！' }, components:{ cpn:{ template:`#cpn` } } })</script></body></html>
版权声明：该文观点仅代表作者本人。处理文章：请发送邮件至 三1五14八八95#扣扣.com 举报，一经查实，本站将立刻删除。