vue/组件嵌套/无限嵌套/嵌套组件消息传递/嵌套父子组件传值

最新推荐文章于 2024-07-27 10:29:40 发布
最新推荐文章于 2024-07-27 10:29:40 发布
阅读量7.2k 收藏 14
点赞数 1
文章标签： vue 组件嵌套 嵌套组件 父子组件间通信 父子组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fireinnight/article/details/88641739
版权
本文详细介绍了在Vue中实现组件无限嵌套以及父子组件间通信的过程。通过需求分析，逐步拆解任务，使用动态路由和嵌套组件实现数据驱动DOM。在组件嵌套中，重点讲解了数据展示、动态添加删除、以及如何提取树结构数据。最后，讨论了潜在的问题和改进方向。
摘要由CSDN通过智能技术生成

目前接到一个需求，是我之前从来没有实践过的，正好趁此机会做一个深度剖析，并记录下这次的成长，并分享给大家。

需求文档

一 、（一个厂商编号和一个版本号）唯一决定一个配置
二 、 配置内容支持无限嵌套
三、配置数据格式示例（配置包括项和模块）：

{
  "vendorId": "IL03#sub_01",
  "version": "9.0.0",
  "config": {
    "module-1": {
      "property-1": "value-1",
      "property-2": "value-2",
      "property-3": "value-3",
      "module-1_1": {
        "property-1_1": "value-1_1",
        "property-1_2": "value-1_2",
        "property-1_3": "value-1_3"
      }
    },
    "module-2": {
      "property-4": "value-4",
      "property-5": "value-5"
    }
  }
}

四、配置成果物如下：
在这里插入图片描述

需求分解

这里需求的难点就是支持配置项的无限嵌套。
　　因为我们平时写代码时总是一开始就知道数据的层次和结构，所以可以提前准备好DOM，然后分别绑定数据项就行了，其实是DOM驱动数据。
　　而这里的需求确是需要我们能够动态地改变DOM结构，根据数据项的层级生成DOM，这里可以看做数据驱动DOM。
　　那么，针对这个情况，vue框架给我们提供的方法就是嵌套组件。通过自身对自身的调用来实现动态DOM。
　　一个简单的嵌套组件：

<template>
	<div>
		<span>{
  {data.content}}<span>
		<div>
			<nested :data="data.child"></nested>
		<div>
	</div>
</template>
<script>
export default {
	name: 'nested'，
	props: ['data']
}
</script>

我们给最外层的组件（根嵌套组件）绑定形如

{
	"content": "value",
	"child": {
		"content": "value-1"
		"child": {
			"content": "value-1_1"
			......
		}
	}
}

的数据结构，就可以看见效果了，是不是和我们前面需求的数据结构很像？

开始动工
step1：最外层列表展示

这里作为静态路由页面展示即可（分页、查询、删除功能在这里做）

<!-- 这里使用了EL-UI -->
<template>
    <!-- 应用配置入口 -->
    <div class="app-config-wrap">
      <!-- 增 -->
      <div class="app-config-add">
        <el-button type="primary" size="mini" @click="handleClickAdd">新增配置</el-button>
      </div>
      <!-- 查 -->
      <div class="app-config-search">
          <div class="label" @click="isShowFilter = !isShowFilter">
              <span class="text">查询App配置</span>
              <span class="el-icon-caret-right" v-if="!isShowFilter"></span>
              <span class="el-icon-caret-bottom" v-else></span>
          </div>
          <div class="clear-all" @click="handleClearAll" v-if="isShowFilter" title="点击清空所有查询条件">
              <span class="text">清空条件</span>
          </div>
          <div class="form-wrap" v-show="isShowFilter">
              <div class="by-vendorId">
                  <el-input type="text" size="mini" placeholder="按厂商编号查询" clearable v-model.trim="vendorId">
                  </el-input>
              </div>
              <div class="by-version">
                  <el-input type="text" size="mini" placeholder="按版本号查询" clearable v-model.trim="version">
                  </el-input>
              </div>
              <div class="search-button">
                  <el-button type="primary" size="mini" @click="handleClickSearch">查  询</el-button>
              </div>
          </div>
      </div>
      <div class="app-config-main" :style="tableHeight">
        <el-table size="mini" height="100%" :data="configList" stripe @row-click="handleClickRow"
          highlight-current-row style="width: 100%;">
            <el-table-column type="index" label="No." width="60"></el-table-column>
            <el-table-column prop="vendorId" label="厂商编号" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="version" label="版本号" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="operation" label="操作">
              <template slot-scope="scope">
                <!-- 删 -->
              	<el-button type="danger" size="mini" @click="handleClickDelete(scope.row.id)">删除配置</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>
      <
最低0.47元/天 解锁文章
雕荣
关注
Vue自定义组件——非单文件组件
cc_xxo的博客
02-26 332
使用 component 或 components <div id="root"> <h1>{{msg}}</h1> <school></school> <hr /> <student></student> <hello></hello> </div> <hr /> <div id="root2"> <hello></hel
Vue组件的嵌套
qq_46582421的博客
11-30 745
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
Vue-组件的嵌套
见证自己学习,成长的记录
05-30 2955
在vue开发中，组件的嵌套也是会被经常使用到的，所以也应该掌握。
在Vue应用中，跨多层组件传输数据是一个常见的需求。以下是一些常见的跨多层组件数据传输场景和使用案例
最新发布
07-27 445
在Vue应用中，跨多层组件传输数据是一个常见的需求。
VUE组件的嵌套
m0_46505467的博客
11-04 718
定义有getter和setter的计算属性。默认只有getter的计算属性。监听data中属性的改变。
Vue中的组件嵌套
虎康的博客
02-12 974
今天完成的是一个组件嵌套功能，实现的是如下效果，其中school1 与school2是同级关系 我是这么想的：先用app去接管vm中的所有组件，app中有school1组件和school2组件，然后在school1中嵌套student，student组件中嵌套hello 在解决组件school1与schoo2同级关系时，控制台报了如下错误，奇奇怪怪的错误让我school1与school2不能同时出现 在经过理解转化之后，修改代码前后对比如下【后者为正确代码】 话不多说，直接上代码理.
vue父子组件的嵌套的示例代码
08-29
Vue 父子组件的嵌套示例代码 在 Vue 框架中，组件是构建用户界面的基本单元。组件可以嵌套使用，以便更好地组织和重用代码。在本文中，我们将展示 Vue 父子组件的嵌套示例代码，帮助读者更好地理解组件的使用。 一...
Vue父子组件传值的一些坑
10-14
本文将深入探讨Vue父子组件传值时可能遇到的问题，以及如何解决这些问题，同时还会涉及到JavaScript中的深拷贝和浅拷贝概念。 1. 问题描述： 在Vue中，当你从父组件向子组件传递一个对象时，如果子组件直接修改了这...
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
01-18
Nuxt嵌套路由官网上的API详解：点击... 父组件的页面的内容</h2> <!-- 进行切换子页面，写法同vue.js --> <li><nuxt to='/parent/child'>child</nuxt></li> <li><nuxt to='/parent/child2'>child2</nux
Vue之组件嵌套
qq_40837310的博客
02-13 1622
简介 主要讲解组件时如何嵌套的。 组件嵌套类似于一个组件里面注册了另外一个组件，存在父子关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件嵌套</title> </head> <body> <div id="root"> <school></s
Vue 组件嵌套
weixin_53037175的博客
10-08 205
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <login></login> </div> <template id="login">
vue组件嵌套
qq_46198929的博客
03-17 365
App组件嵌套school组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p :style="w">{{kaish
Vue组件嵌套
qq_36582776的博客
11-07 70
school包含student manager管理所有的组件（school、hello） html里面只需要写<manager></manager>,或者也可以将其写在vm的template里 <body> <div id="div1"> <!-- 三：利用组件标签使用组件 --> <manager></manager> </div> </b
VUE组件嵌套
qq_40664253的博客
07-18 201
例如，将My.vue作为App.vue的子组件 局部注册组件 在App.vue里script标签下引用，注册 全局注册组件 在main.js里操作
Vue之-组件-组件嵌套
qq_67801847的博客
08-11 2407
组件本质是一个VueComponent的构造函数，且不是程序员定义的，由Vue.entend生成。1.创建组件：const a=Vue.extend ({}）每次调用Vue.entend时就会返回一个全新的VueComponent。3.引用组件：直接调用组件名称作为标签即可。全局配置组件： Vue.() 注意不加s。...............
vue组件嵌套（初学者超简单，一看就懂）
weixin_60941411的博客
11-22 5479
（1）组件的上一层级是vm实例，因此app组件在new VUe里面注册。组件的上一层级是vm实例，因此app组件在new VUe里面使用。（2）和组件的上一层级是组件（2）和组件的上一层级是组件（3）组件的上一层级是（3）组件的上一层级是
Vue-组件嵌套、组件CSS样式、多组件嵌套、组件传值、传值和传引用、多个单文件组件路由的使用
NeilNiu
12-31 2630
App.vue是父组件，components下面的是子组件 组件嵌套包括，全局组件和局部组件 一般使用的是局部组件，使用方式是， 1、引用组件 2、注册组件 3、使用组件 新建一个Users.vue 子组件， <template> <div class="Users"> <ul> <li v-for="(user, index) in users" :key="index">{{ user }}</li>
vue多层组件嵌套传值
09-07
### 回答1： 在 Vue 中，可以通过使用 props 和事件来实现多层组件之间的数据传递。 1. 使用 props 在父组件中使用 props，将数据传递给子组件。子组件通过 props 接收数据，然后进行处理。 例如，父组件中定义一个数据传递给子组件： ``` <template> <child-component :message="message"></child-component> </template> <script> export default { data() { return { message: "Hello World" } } } </script> ``` 子组件中通过 props 接收数据： ``` <template> <div>{{ message }}</div> </template> <script> export default { props: { message: String } } </script> ``` 2. 使用事件 在子组件中通过 $emit 触发事件，将数据传递给父组件。父组件中监听该事件，然后进行处理。 例如，在子组件中定义一个点击事件，将数据传递给父组件： ``` <template> <div @click="handleClick">{{ message }}</div> </template> <script> export default { data() { return { message: "Hello World" } }, methods: { handleClick() { this.$emit("message-clicked", this.message); } } } </script> ``` 在父组件中监听该事件，接收数据： ``` <template> <child-component @message-clicked="handleMessageClicked"></child-component> </template> <script> export default { methods: { handleMessageClicked(message) { console.log(message); } } } </script> ``` 以上就是两种常见的多层组件嵌套传值的方法。需要注意的是，使用 props 时，父组件中的数据是通过单向数据流向子组件传递的，子组件无法直接修改父组件中的数据。如果需要修改，可以通过使用 $emit 触发事件进行传递。 ### 回答2： 在Vue中，多层组件之间的值传递是通过父子组件之间的props和子组件之间的事件来实现的。 首先，在父组件中使用属性props将需要传递的值传递给子组件。例如： ```vue <template> <div> <ChildComponent :message="message"></ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello World' }; }, }; </script> ``` 在子组件中，使用props来接收父组件传递的值。例如： ```vue <template> <div> <p>{{ message }}</p> <GrandchildComponent :subMessage="message"></GrandchildComponent> </div> </template> <script> import GrandchildComponent from './GrandchildComponent.vue'; export default { props: { message: String }, components: { GrandchildComponent } }; </script> ``` 在孙子组件中，同样使用props来接收子组件传递的值。例如： ```vue <template> <div> <p>{{ subMessage }}</p> </div> </template> <script> export default { props: { subMessage: String } }; </script> ``` 这样就完成了多层组件之间的传值。父组件将值传递给子组件，子组件将值传递给孙子组件，实现了多层组件嵌套传值的功能。 ### 回答3： 在Vue中，多层组件嵌套传值的方法有多种。以下是两种常用的方法： 1. 父组件向子组件传值：可以通过props属性将父组件的数据传递给子组件。首先，在父组件中定义一个数据属性，然后通过props属性将其传递给子组件。子组件可以通过this.props来获取父组件传递的值。例如： 父组件： ``` <template> <div> <ChildComponent :childProp="parentData" /> <!-- 将父组件中的数据parentData通过childProp传递给子组件 --> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentData: '父组件数据', } }, components: { ChildComponent, }, } </script> ``` 子组件： ``` <template> <div> <p>{{ childProp }}</p> <!-- 在子组件中使用childProp来获取父组件传递的值 --> </div> </template> <script> export default { props: ['childProp'], // 声明接收父组件传递的值 } </script> ``` 2. 子组件向父组件传值：可以通过自定义事件来实现子组件向父组件传递值。首先，在子组件中触发一个自定义事件，并将需要传递的值作为参数传递给父组件。然后，在父组件中使用v-on指令监听子组件触发的事件，并在对应的方法中获取子组件传递的值。例如： 父组件： ``` <template> <div> <ChildComponent @childEvent="handleChildEvent" /> <!-- 监听子组件触发的childEvent事件，并在handleChildEvent方法中获取子组件传递的值 --> <p>{{ childData }}</p> <!-- 显示子组件传递的值 --> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { childData: '', } }, components: { ChildComponent, }, methods: { handleChildEvent(data) { // 子组件触发事件时，会将值作为参数传递给handleChildEvent方法 this.childData = data; // 在父组件中获取子组件传递的值 }, }, } </script> ``` 子组件： ``` <template> <div> <button @click="sendData">传递数据给父组件</button> <!-- 点击按钮时触发sendData方法，向父组件传递数据 --> </div> </template> <script> export default { methods: { sendData() { this.$emit('childEvent', '子组件数据'); // 触发名为childEvent的事件，并将子组件的数据作为参数传递给父组件 }, }, } </script> ``` 通过以上两种方式，可以实现多层组件嵌套中的数据传递和交互。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值