How does the VUE child component change the value passed from the parent component, and how the VUE child component modifies the value of the parent component, and the parent component modifies the value of the child component

1) The child component modifies the value passed from the parent component:

The parent component passed me a data named deptName, but now I want to modify its value in the child component and update the page in real time. Directly this.deptName cannot directly modify its value, so I use an intermediate variable to The accepted way to align is modified:

 1. Parent component:

2. Subcomponents:

Define a variable in data to accept, and then assign it to this.deptName, and then you can modify the method alignment of data normally.

2) The child component modifies the value in the parent component:

VUE2 case:

I want to delete a value. This logic is carried out in the child component, so there are no fewer values ​​in the array of the parent component, but the value in the database has changed. The effect can only be seen when the page is refreshed next time. This is a very bad experience. At this point we need to use child components to modify the value of the parent component to achieve this goal. 

1. Parent component: normal reference, but the child component needs to be bound to an event (the name is self-made, and the event name and function name here are called callBack)

 2. Come to the sub-component , (I am long pressing the sub-component to realize the delete operation, so write $emit in the long-press function to pass the value):

The first parameter of $emit below must be the event name after @ in the above parent component, and the parameter after the second is the passed value.

 3. At this point we come to the parent component: implement the callBack function:

 In this way, a certain value in the array in the parent component is deleted, and the data changes in real time.

VUE3 writing method:

Case description: The child component writes a click event, and when clicked, it will pass a value to the parent component

Subassembly:

html part:

<template>
  <!-- 子组件向父组件传值: -->
  <img :src="url" @click="clickSub" />
</template>

script part:

<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>

parent component:

html：

<template>
  <!-- 子组件向父组件传值: -->
  <swipers @sub-event="subClick" :url="img3" />
</template>

script part:

<script>
//获取子组件传递来的值
function subClick(e) {
  console.log(e);
}

export default {
  name: "App",
  components: {
    swipers: swiper, //注册组件,标签叫什么还是从这决定的
  },

  setup() {
    return {
    };
  },
};
</script>

3. The parent component modifies the value of the child component:

parent component:

1. Because we want to implement two-way data binding, the data must be a responsive object. Then we first import Vue's responsive function and define a responsive object:

//父组件修改子组件的值
import { ref } from "vue";
const numChange = ref(1);
  function numChanges(){
    numChange.value+=1;
  }

2. Logical description: We pass a num attribute to the child component, and then there is a button in the parent component. The value of this number will change every time the button is clicked. We want to verify that the value of the child component also changes with the value of the parent component. And change.

html part:

<template>
  <swipers :num="numChange"/>
  <button @click="numChanges()">click</button>
</template>

script part:

<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>

 Subassembly:

<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>

Effect:

Each click will cause the value to change.