vue组件/路由/子组件改父组件数据_vue在二级路由更改一级路由的data数据-CSDN博客

本文链接：https://blog.csdn.net/java_jiawawa/article/details/121875144

本文详细介绍了Vue项目的启动、组件定义与注册、变量的使用、路由配置及子路由应用，重点讲解了如何通过v-bind、$emit和sync实现父子组件间的数据同步，以及使用弹框组件时的数据清空策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第1部分:启动项目

Vue前段项目启动：npm run serve

第2部分:组件

2.1 定义组件component

一个页面模块/组件（json传值）：html+css+js

 组件构成：
<template>
 			<div /> :html
</template>
 <script />:动态数据 js
 <style scoped lang=“less”>：css

▶Scoped:下面的选择器（标签）只在当前组件生效。——-避免：重名选择器，影响其他组件样式
▶lang=“less”：.父选择器 .子选择器=.父选择器{.子选择器}
定义样式变量

该组件(含html/js)可单独作为一个js页面被引入

<script>
Const component = {
					Name:
					Template:
					Data(){
					　　　　return()} 
}
</script>

属性Template（等于html）标签与动态数据拼接,不便查看
<template>标签下只允许写一个<div>标签，在<div>标签下可以多个子标签

2.2 注册组件components

<script>
Const component = {
Name:
Template:
Data(){
　　　　return()}
}
components:{
　　　　　　　导入名/标签名1: component
			导出名2（key：value即导入导出name一样，只写一遍）
			}
</ script>

2.3 独立标签（呈现页面）

<body>
<标签名1></标签名1>
</body>

第2部分:变量

2.1 return变量

定义变量，但没return值，就不展示页面（整体报错）

2.1 导出变量（别人引用）

<script>
Export default {
 数据名：数据值（json）
}

2.2 导入变量（必须已导出）

格式: Import 自定义变量名 from “路径（1.后缀名可忽略2.若组件名index.vue可省略文件名，地址到上一级目录即可）”

第3部分:路由

3.1 路由

3.1.1 原因

Vue单页开发（只有一个页面 index.html）——路由(将其他页面都作为组件/模块：导入)：根据不同地址，浏览器中显示不同模块（页面）

@ === src 可用于绝对路径

3.1.2 部署

App组件（Vue唯一页面）页面需要跳转处，加标签< router-view/>

App组件中：
<template>
  <div>
    <router-view/>

经过下面配置后，当浏览器地址是/a时候，就会显示a组件页面，显示位置在App组件<router-view/>处

新建组件页面

<script>
Export default {
Name：‘导出名2’}

在src/router/index.js下配置(构建导入和导出的对应关系)：对应地址、模块

方式一：
	Import  自定义引入名1  From ‘路径@/’’
	Count Routes = [
						{每个路径都是一个json
						Name： ‘导出名2‘
						Path：‘/a’ （浏览器访问地址）
						Component： 自定义引入名1 （组件对象）
						}
					]

方式二：（推）
Count Routes = [
				{
				Name： ‘导出名2‘
				Path：‘/a’ 
		    	Component：（） => import（’路径@/’）(Component是函数，改写)
				}
				]

浏览器地址栏输入组件地址，实现跳转

3.2 子路由(用于：导航栏)-----父子组件传递“地址”

3.2.1 导航栏标签

Element 是ui框架：css样式———公司已用框架搭好

导航 el-menu：router（实现跳转）——不加此标签，<router—view>不起效果
El-submenu：展示伸缩框。index（跳转的页面地址）
El-menu-item ：index（跳转的页面地址）

3.2.1 区别于‘路由’

注册的位置，在二级（某组件路由的 children属性）
长辈标签（导航 el-menu），定义router（==开启路由功能）。位置标签router-view才生效

3.1 路由页面加载流程（不断替换）

index.html+main.js(规定： App界面代替index.xml页面div定义的app)
—>App界面，替代(App页面设置路由，根据浏览器不同地址，跳转整个界面
—>自定义index，替代
—>导航router，页面不变跳转不同内容（设置子路由，替代一部分）

第4部分 v-bind:+$emit +sync -----父子组件传递“值”

4.1 值的同步：sync

双向绑定（分页查询）、父子组件传值（弹窗）：值在不同地方，彼此相互同步问题。解决：vue中关键词：sync

4.1.1 雷同：双向绑定

流程：在分页查询中，前端收到后端值----（方向1）----》值显示在页面-------》页面更改页数—（方向2）—》前端参数被【同步更改】，刷新后端传来的值，再将新值显示在页面上
双向绑定：https://blog.csdn.net/java_jiawawa/article/details/121976374

【表格：双向绑定sync】
:current-page.sync="params.pageNo"

4.1.2 “传值”背景

工具：（show定义在父组件中。）操作 show：true/false 判断弹窗是否展示 ----------需求：父、子都能操作show（相互同步）

【弹窗：父子组件传递“值”】
:show.sync="dialog.show"

流程：页面”新增“------》父组件index.vue–（方向1）操控---->子组件------》页面”保存“-------》子组件-----（方向2）操控-----》父组件

父操作子：index页面（父组件）要点击新增按钮后，弹出弹窗页面（子组件）
子操作父：弹窗（子组件）展示完毕，点击保存后，自动关闭隐藏（父组件）

在这里插入图片描述

4.2 “传值”步骤

4.2.1 父传值给子 ----- v-bind:

【父组件】
<el-button 
		@click="add">添加用户
</el-button>

add(){
				this.dialog.show = true;
			}

dialog: {
					show: false,
				}

【父组件：传值给子】
<UserEdit :show="dialog.show"/>
			自定义子组件要用的属性名= ‘父组件具体哪个值’

4.2.2 子传值给父

【子组件】
<script>
	export default{
		name: 'UserEdit',
		props:{                   ----属性
			show:{                  ----属性名
				type:Boolean,
				default: null
			}
		}

		created(){
			this.show = false
		}

props：该组件具有什么属性
接收属性的方式可以选择json

{属性名=接收数据：{
		type（类型）：	，
		default（默认：没传参时的值）： }}

4.2.3 “传值”问题：子组件不能改父组件值

父与子传【对象】，【对象的值】是一个指针。可以更改值。
父与子传【值】，传来就是一个值：只读

雷同：https://blog.csdn.net/java_jiawawa/article/details/121988673
基本数据类型：值不能变
引用数据类型：地址不能变，值可以变

4.2.4 解决：$emit +sync

【子组件】
methods:{
			save(){
				this.post('/ums-user/add', this.form, () => {
				this.$emit('update:show' , false)
				})
			}

$emit:操作（=修改值/传递值）父组件值
update（更新+需要更新的组件属性名）：show，false（该属性重新更换的值）

【父组件】
<UserEdit :show.sync ="dialog.show"/>

第6部分:@+$emit-----父子组件传递“函数”

【父组件】
<UserEdit 	@getTableData="getTableData"	/>
			（自定义）子组件要用的函数= ‘父组件具体哪个函数'

【子组件】
methods:{
			save(){
				this.post('/ums-user/add', this.form, () => {
				this.$emit('update:show' , false)
				this.$emit('getTableData')
				})

第5部分:弹框

5.1 逻辑

首页面定义添加按钮
（事件）按钮绑定弹框页面的显示词 @click
定义弹框组件（页面+前端+后端）双向绑定+ajax请求

弹框页面内保存按钮：

 1）发送数据，保存数据 父子组件传值 v-bind:+$emit +sync
 2）定义小提示弹框 : 显示后端返回值中枚举中success的message
 3）关闭弹窗（此刻，再次打开弹窗数据会复现）  v-bind:+$emit +sync 更新页面数据（看到

新增数据）子组件绑定父组件函数@+$emit （事件）按钮再次点开新增（清空之前数据）：v-if

5.2 再次打开弹窗，清空之前数据---- v-if

弹窗一直存在，只不过是隐藏/显示=标签如何定义

再次打开弹窗，清空之前数据=获取数据的标签重新加载

<UserEdit
			v-if="dialog.show"
			:show.sync ="dialog.show"
			@getTableData="getTableData"
			/>

v-if 如果条件为真（父组件开启弹窗）才会执行下面标签（存在）
:show.sync 弹窗的关闭
@getTableData 重载数据
else 否则，这些标签就不存在

换而言之，每一次v-if判断一次，就是一个新标签（重载）。虽然标签都长得一样。因此，写在旧标签里的数据，随着v-if再次判断，随着旧标签一起被新的一摸一样的标签替换。
在这里插入图片描述