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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
PHP编程风格规范分享
2014/01/15 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
three.js 入门案例详解
2018/01/23 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
法制演讲稿
2014/09/10 职场文书
员工担保书范本
2015/09/22 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
python可视化之颜色映射详解
2021/09/15 Python
Python保存并浏览用户的历史记录
2022/04/29 Python