vue组件中如何嵌套子组件

如何把一个子组件comment.vue放到一个组件中去

1、先创建一个单独的 comment.vue 组件模板

<div class="cmt-list">
           <div class="cmt-item">
               <div class="cmt-title">
                   第1楼  用户：匿名用户  发表时间：2012-12-12 12:12:12
               </div>
               <div class="cmt-body">
                   锄禾日当午符合
               </div>
           </div>

<div class="cmt-item">
               <div class="cmt-title">
                   第1楼  用户：匿名用户  发表时间：2012-12-12 12:12:12
               </div>
               <div class="cmt-body">
                   锄禾日当午符合
               </div>
           </div>

<div class="cmt-item">
               <div class="cmt-title">
                   第1楼  用户：匿名用户  发表时间：2012-12-12 12:12:12
               </div>
               <div class="cmt-body">
                   锄禾日当午符合
               </div>
           </div>
       </div>

<mt-button type="danger" size="large" plain>加载更多</mt-button>
</div>
</template>

.cmt-container{
   h3{
       font-size: 18px;
   }
   textarea{
       font-size: 14px;
       height: 85px;
       margin: 0;
   }
   .cmt-list{
       margin: 5px 0;
       .cmt-item{
           font-size: 13px;
           .cmt-title{
               background-color: #ccc;
           }
       }
       .cmt-body{
           line-height: 35px;
           text-indent: 2em; //缩进
       }
   }
}

</style>

2、在需要使用组件的页面中，先手动导入 comment 组件
+ import comment from './comment.vue'

3、在父组件中，使用'components' 属性，将刚才导入的 comment 组件，注册为自己的子组件
4、将注册子组件时候的，注册名称，以标签形式，在页面中引用即可

vue组件中如何嵌套子组件相关推荐

vue自定义组件中再嵌套其他组件
其实就是在容器组件里放一个插槽(slot). VUE的看点是组件.组件应用的典型例子,是一个网站首页.分为若干版块.每个版块都是一个方框框,样式一致,只是版块中间内容不同.对于VUE来说,很自然的想法 ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
从vue文件中抽取出子组件的流程及过程中踩过的坑
流程: 1. 确保注册.引入子组件的正确性: 创建一个新的vue文件,包含基本的template,及export的内容,其中可简单包含空的data函数.暂时先不把子组件中的代码移出.在父组件中impo ...
vue ui无效_vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。...
在vue的开发中,我们需要引用子组件,包括ui组件(element.iview).但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的.去掉scoped之后,样式可以覆盖.但这样会 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
vue父组件变量传递子组件_Vue2.x中的父组件数据传递至子组件
父组件结构 template :girls="aGirls"> script import vGirlGroup from './GirlGroup' export defa ...
vue如何在一个组件中引用另外一个组件并使用?有两种方法
方法一:代码如下 <template><div><testComponent></tes ...
Vue2.x中的父组件数据传递至子组件
父组件结构 template <template><div><v-girl-group :girls="aGirls"></v-girl- ...
vue 关闭弹如何销毁子组件_vue中的eventBus会产生内存泄漏吗
eventBus是在vue中经常用来解决跨组件消息传递的问题,但对它的使用要特别注意,否则会产生很严重的后果. 引入本文介绍了eventBus的实现原理,并介绍它如何在vue中使用,并举了一个具体的 ...

vue组件中如何嵌套子组件

如何把一个子组件comment.vue放到一个组件中去

vue组件中如何嵌套子组件相关推荐

最新文章

热门文章