vue组件中实现嵌套子组件案例


Posted in Javascript onAugust 31, 2020

如何把一个子组件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怎么将一个组件引入另一个组件?

项目是由的vue-cli搭建

1.这里有两个组件,需求是把newComponents.vue里面的东西引入到helloWorld里面

vue组件中实现嵌套子组件案例

2.index.js里面的配置

vue组件中实现嵌套子组件案例

3.newComponents里面的内容

vue组件中实现嵌套子组件案例

4.怎么将newComponents引入到helloWorld呢?

vue组件中实现嵌套子组件案例

5.页面展示

vue组件中实现嵌套子组件案例

以上这篇vue组件中实现嵌套子组件案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 #Javascript
详解vue v-model
Aug 31 #Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 #Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 #Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 #Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 #Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 #Javascript
You might like
PHP 编程安全性小结
2010/01/08 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python对象体系深入分析
2014/10/28 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
降低python版本的操作方法
2020/09/11 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
2014年教师节讲话稿5篇
2014/09/10 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
公司环境卫生管理制度
2015/08/05 职场文书