一）子组件修改父组件传来的值：
父组件传递给我一个名为deptName数据，但是现在我要在子组件中修改它的值并且实时更新页面，直接this.deptName是不能直接修改他的值的，所以我采用了使用一个中间变量来接受的方式对齐进行修改：
1、父组件：
2、子组件：
在data中定义一个变量接受，然后将其赋值为this.deptName即可，之后就可以正常修改data的方法对齐进行修改了。
二）子组件修改父组件中的值：
VUE2案例：
我要删除一个值，这个逻辑是在子组件进行的，所以父组件的数组中值没有少但是数据库的值已经改变了，只有下次刷新页面的时候才能看到效果，这样体验非常不好，此时我们需要用子组件来修改父组件的值来达到这个目的。
1、父组件：正常引用，但是子组件要绑定一个事件(名称自己起，我这里事件名和函数名都叫callBack)
2、来到子组件，(我这里是长按子组件实现删除操作，所以就在那个长按的函数里写$emit来传递值)：
下面$emit的第一个参数必须是上述父组件中@后面的事件名，第二个之后的参数就是传递的值。
3、此时我们来到父组件：实现callBack函数：
这样就完成删除了父组件中的数组中的某个值，数据是实时变化的了。
VUE3写法：
案例说明：子组件写了一个点击事件，当点击时就会给父组件传递一个值
子组件：
html部分：
<template>
<!-- 子组件向父组件传值: -->
<img :src="url" @click="clickSub" />
</template>script部分：
<script>
//定义了要传递的值
const vals = 1;
export default {
name: "swiper",
props: {
url: {
type: String,
default: "",
},
},
//此处要写context参数，用于传递值
setup(props, context) {
//点击之后触发的事件
function clickSub() {
//第一个参数是事件的名称。第二个是事件要传递的值
context.emit("sub-event", vals);
}
//将值和函数注册到setup函数中
return {
vals,
clickSub,
};
},
};
</script>父组件：
html：
<template>
<!-- 子组件向父组件传值: -->
<swipers @sub-event="subClick" :url="img3" />
</template>script部分：
<script>
//获取子组件传递来的值
function subClick(e) {
console.log(e);
}
export default {
name: "App",
components: {
swipers: swiper, //注册组件,标签叫什么还是从这决定的
},
setup() {
return {
};
},
};
</script>三、父组件修改子组件的值：
父组件：
1、因为我们要实现双向数据绑定，所以数据必须是响应式对象。那我们首先导入vue的响应式函数，以及定义一个响应式对象：
//父组件修改子组件的值
import { ref } from "vue";
const numChange = ref(1);
function numChanges(){
numChange.value+=1;
}2、逻辑描述：我们给子组件传递一个num属性，然后在父组件中有一个按钮，每次按钮点击这个数字的值就会变化，我们想验证子组件的值也随着父组件值的变化而变化。
html部分：
<template>
<swipers :num="numChange"/>
<button @click="numChanges()">click</button>
</template>script部分：
<script>
//导入组件
import swiper from "./components/swiper.vue";
//父组件修改子组件的值
import { ref } from "vue";
const numChange = ref(1);
function numChanges(){
numChange.value+=1;
}
export default {
name: "App",
components: {
swipers: swiper, //注册组件,标签叫什么还是从这决定的
},
setup() {
//定义完函数和变量之后在setup函数中注册
return {
numChange,
numChanges
};
},
};
</script>子组件：
<template>
<img :src="url" />
<div>{
{ num }}</div>
</template>
<script>
export default {
name: "swiper",
props: {
num: {
type: Number,
},
},
setup(props) {
//获取url的值
console.log(props.Number);
},
};
</script>效果：
每次点击click就会使值发生变化。