Vue3的数据传递和共享

---

前言

由于课程的项目前端开发结束，对于开发过程中遇到的问题解决和技术框架学习，我觉得还是要记录下来用来以后回忆，优化项目。希望大家不吝赐教，也欢迎大家来沟通交流学习！

---

一、Vue3的数据传递方式

Vue3的数据传递：
（1）父组件传递数据给子组件
（2）子组件传递数据给父组件
提示：除了以上两个可以实现组件之间的数据共享以外，我在项目开发后期接触到了Vuex状态项目管理，因此彷佛打开了数据的大门，所以此文章还会补充我用Vuex来进行数据管理

二、父组件传递数据给子组件

2.1 在父组件中

1、引入ref，reactive

import { reactive } from 'vue'

2、数据初始化，定义要传递的属性和属性值

let form = reactive({
	articleId:'',
	direction:''
})	

3、在父组件中导入并定义子组件，在子组件上绑定定义的属性并传递数据

//导入子组件
import modifyArticle from '@/components/modifyArticle.vue'
//定义子组件，并绑定定义的属性
<modifyArticle
	v-model:articleId = "form.articleId"
	v-model:direction = "form.direction">
</modifyArticle>	

2.2 在子组件中

1、引入defineProps接收父组件传来的属性值

//导入defineProps
import { defineProps } from 'vue'
//接收父组件传来的属性值
const props = defineProps({
	articleId: Number,
	direction: String
})

2、在子组件的标签中使用父组件传递来的属性值

//将父组件传递来的数据赋值给提前定义好的表单数据
const ruleForm = reactive({
	articleId: props.articleId,
	direction: props.direction
})
//在子组件的标签中使用，用的是element-plus组件库
<el-form
	:model="ruleForm"
	label-width="120px"
>   
	<el-form-item label="宣传文章ID">
		<el-input class="form_user" v-model="ruleForm.articleId"></el-input>
	</el-form-item>
	<el-form-item label="招生方向">
		<el-select v-model="ruleForm.direction" placeholder="请选择招生方向">
			<el-option label="嵌入式" value="嵌入式"></el-option>
            <el-option label="Java" value="Java"></el-option>
            <el-option label="大数据" value="大数据"></el-option>
            <el-option label="人工智能" value="人工智能"></el-option>
            <el-option label="Python" value="Python"></el-option>
          	<el-option label="前端" value="前端"></el-option>
         </el-select>
	</el-form-item>
</el-form>

提示：由于父组件传递给子组件的数据是一次性的，所以如果要父组件数据更新，子组件数据随之更新，需要用watch监听器来监听父组件的数据改变，后期我会把监听器的部分补上。

三、子组件传递数据给父组件

3.1 在子组件中

1、引入defineEmits

import { defineEmits } from 'vue'

2、数据初始化，定义要传递的属性和属性值

let ruleForm = reactive({
	articleId:'',
	direction:''
})	

3、在子组件中定义需要传递给父组件中指定的属性或者方法的值

//定义
const emit = defineEmits(['modifyFormValues'])
//传递
emit('modifyFormValues',ruleForm)	

3.2 在父组件中

在父组件中定义的子组件属性标签上接收子组件传入的自定义属性名，并绑定在父组件自定义的属性或方法上

//定义并绑定自定义属性到子组件属性标签
<modifyArticle
	@modifyFormValues = "get_modifyFormValues"
>
</modifyArticle>
//父组件自定义的get_modifyFormValues方法接收子组件数据
const get_modifyFormValues = (values) => {
	console.log("文章编号："+values.articleId+",招生方向："+values.direction)
}

四、补充：Vuex状态管理实现数据的共享

1、在src文件夹下创建store文件夹，并创建index.js文件存储管理宣传文章状态

//导入vuex
import { createStore } from 'vuex'
//声明全局的状态初始值，并设置修改的触发方法
export default createStore({
	state:{
		articleInfo:{
			articleId:'',
			directtion:''
		}
	},
	mutations:{
		setArticleInfo(state, articleload){
			state.articleInfo = articleload;
		}
	}
})

2、在需要调用的组件中创建vuex实例，再获取属性值

//导入vuex
import { useStore } from 'vuex'
//创建vuex实例
const store = useStore()
//使用宣传文章的状态存储
const ruleForm = reactive({
	articleId:'',
	direction:''
})
ruleForm.article = store.state.articleInfo.articleId
ruleForm.direction = store.state.articleInfo.direction

总结

通过这次项目开发，简单地接触了Vue3的部分知识，出于锻炼自己开发能力的目的，我在项目中简单使用了这三个方式进行数据共享和传递，并且简单整理成了这篇文章，如有不足，望见谅！如果能给我指出，将不胜感激！