码迷,mamicode.com
首页 > Web开发 > 详细

vue给子组件增加html内容(称为插槽 slot)

时间:2019-07-10 22:52:34      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:utf-8   标签   默认   添加   pre   tle   lan   设置   style   

插槽给子组件增加内容,插槽可以设置默认值

在子组件中template中插槽写法 <slot></slot>

slot标签内可以添加name属性,要与html中的slot值对应起来

(要是子组件html之间没有写内容,又想显示某个值,可以使用slot默认值:<slot>默认值</slot>)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <body-content>
        <div slot="header">header</div>
        <div slot="footer">footer</div>
      </body-content>
    </div>
    <script>
      Vue.component("bodyContent",{
        template:`<div>
                    <slot name=header></slot>
                    <div>content</div>
                    <slot name=footer></slot>
                  </div>`
      });
      var app = new Vue({
        el:#app
      })
    </script>
  </body>
</html>

 

vue给子组件增加html内容(称为插槽 slot)

标签:utf-8   标签   默认   添加   pre   tle   lan   设置   style   

原文地址:https://www.cnblogs.com/feiyangyao/p/11167048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!