vue组件中实现嵌套子组件案例
更新时间：2020年08月31日 11:38:08 作者：开心果小魏
这篇文章主要介绍了vue组件中实现嵌套子组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如何把一个子组件comment.vue放到一个组件中去
1、先创建一个单独的 comment.vue 组件模板
<template>
<div class="cmt-container">
<h3>发表评论</h3>
<hr>
<textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120"></textarea>
<mt-button type="primary" size="large">发表评论</mt-button>
<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>
<script>
</script>
<style lang="scss" scoped>
.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-cli搭建
1.这里有两个组件,需求是把newComponents.vue里面的东西引入到helloWorld里面
2.index.js里面的配置
3.newComponents里面的内容
4.怎么将newComponents引入到helloWorld呢?
5.页面展示
以上这篇vue组件中实现嵌套子组件案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近在工作中碰到一个问题,后端提供的get请求的接口需要在request header设置,下面这篇文章主要给大家介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下2022-04-04
Vue官网教程上关于v-model的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下,下面这篇文章主要给大家介绍了关于vue v-model最详细讲解的相关资料,需要的朋友可以参考下2022-11-11
我们在使用element-ui的时候经常会遇到需要修改组件默认样式,下面这篇文章主要给大家介绍了关于element-ui中样式覆盖问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
Vue echart实现柱状图,电池图,3D柱图和3D圆柱图代码详解
这篇文章主要为大家介绍了Vue实现echart绘图代码详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
下面小编就为大家分享一篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于Vue中$root使用方法及注意事项的相关资料,vue中$root是用来访问根组件的,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
Vue是一种流行的JavaScript框架,可以帮助开发者建立高效的Web应用程序,本文将为您介绍如何在Vue中实现登录验证功能,并为您提供具体的代码示例,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了vue动态组件之:is在组件中的使用场景,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue仿Bibibili首页,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了深入Vue-Router路由嵌套理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论