个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue组件中实现嵌套子组件案例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

如何把一个子组件comment.vue放到一个组件中去 。

1、先创建一个单独的 comment.vue 组件模板 。

  1. <template>
  2. <div class="cmt-container">
  3. <h3>发表评论</h3>
  4. <hr>
  5. <textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120"></textarea>
  6. <mt-button type="primary" size="large">发表评论</mt-button>
  7. <div class="cmt-list">
  8. <div class="cmt-item">
  9. <div class="cmt-title">
  10. 第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2012-12-12 12:12:12
  11. </div>
  12. <div class="cmt-body">
  13. 锄禾日当午 符合
  14. </div>
  15. </div>
  16. <div class="cmt-item">
  17. <div class="cmt-title">
  18. 第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2012-12-12 12:12:12
  19. </div>
  20. <div class="cmt-body">
  21. 锄禾日当午 符合
  22. </div>
  23. </div>
  24. <div class="cmt-item">
  25. <div class="cmt-title">
  26. 第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2012-12-12 12:12:12
  27. </div>
  28. <div class="cmt-body">
  29. 锄禾日当午 符合
  30. </div>
  31. </div>
  32. </div>
  33. <mt-button type="danger" size="large" plain>加载更多</mt-button>
  34. </div>
  35. </template>
  36. <script>
  37.  
  38. </script>
  39. <style lang="scss" scoped>
  40. .cmt-container{
  41. h3{
  42. font-size: 18px;
  43. }
  44. textarea{
  45. font-size: 14px;
  46. height: 85px;
  47. margin: 0;
  48. }
  49. .cmt-list{
  50. margin: 5px 0;
  51. .cmt-item{
  52. font-size: 13px;
  53. .cmt-title{
  54. background-color: #ccc;
  55. }
  56. }
  57. .cmt-body{
  58. line-height: 35px;
  59. text-indent: 2em; //缩进
  60. }
  61. }
  62. }
  63.  
  64. </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组件中实现嵌套子组件案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们.

原文链接：https://blog.csdn.net/qq_35737292/article/details/84921352 。

最后此篇关于vue组件中实现嵌套子组件案例的文章就讲到这里了,如果你想了解更多关于vue组件中实现嵌套子组件案例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 浅谈Python3中strip()、lstrip()、rstrip()用法详解
文章推荐： Python 实现微信防撤回功能
文章推荐： python程序控制NAO机器人行走
文章推荐： vue 项目中当访问路由不存在的时候默认访问404页面操作
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com