码迷,mamicode.com
首页 > 其他好文 > 详细

Vue-组件-插槽

时间:2019-01-22 17:30:15      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:err   import   func   some   vue   data   UNC   直接   turn   

Vue-组件-插槽

通过插槽分发内容

子组件中

<template>
  <div id="app">
    <strong>Error!</strong>
  </div>
</template>

父组件中

<template>
  <div id="app">
    <Slo>
      Something bad happened.
    </Slo>
  </div>
</template>
<script>
import Slot from "./components/Slot";
export default {
  name: "App",
  data: function() {
    return {

    };
  },
  components: {
    Slo: Slot //这里为了不和vue标签slot重名注册为Slo
  },
};
</script>

上面这样无法直接显示出插入的Something bad happened.

子组件中加入

<template>
  <div id="app">
    <strong>Error!</strong>
    <slot></slot> 
  </div>
</template>

这样就可以显示出来了。

Vue-组件-插槽

标签:err   import   func   some   vue   data   UNC   直接   turn   

原文地址:https://www.cnblogs.com/guangzan/p/10304543.html

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