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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 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小偷相关截取函数备忘
2010/11/28 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
基于python生成器封装的协程类
2019/03/20 Python
python3 map函数和filter函数详解
2019/08/26 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
质检部部长职责
2013/12/16 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书