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 arguments对象应用介绍
Nov 28 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
解析link_mysql的php版
2013/06/30 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
几个数据库方面的面试题
2016/07/01 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
婚纱店策划方案
2014/05/22 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
欢迎词怎么写
2015/01/23 职场文书
护理心得体会范文
2016/01/22 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers