Value passing method between vue2 and vue3 child component parent component

Vue parent component child component value transfer method between vue2 and vue3 child component parent components

In the process of component development, it is inevitable to encounter communication between sub-components and parent components. So here are the different communication methods between vue2 and vue3.

Take a look at vue2 first

• Pass parameters from parent component to child component

The parent component passes :the syntax is actually v-bind to pass parameters
, and the child component passes propsto get the method passed by the parent component

亿点小知识:子组件接收到数据之后，不能直接修改父组件的数据。会报错

// 父组件 parent 像子组件传递 msg 值
<template>
    <Children :datum="'我是父组件的数据'"></Children>
</template>
​----------------------------------------------------------------------------------
// 子组件 接收 父组件 传递的数据
export default {
    
    
  // 写法一 用数组接收
  props:['datum'],
  // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
  props:{
    
    
      datum:{
    
    
          type:String,
          default:'这是默认数据'
      }
  },
  mounted(){
    
    
      console.log(this.datum)// 我是父组件的数据
  },
}

• The child component passes parameters to the parent component (here also talks about the method of passing the parent component to the child component)

The parent component passes the @method v-on
, and the child component obtains the method passed $emitby the parent component and passes data to the parent component through

<template>
    <Children @method="method"></Children>
</template>
<script>
  import Children from './Children';
  export default {
    
    
    components: {
    
    
      Children
    },
    methods: {
    
    
      method(data) {
    
     // 这里的 data 就是子组件传递的参数 如果参数拥有多个可以使用 ...语法获取参数
        console.log(data);// 子组件传递的参数
      }
    }
  };
</script>
​----------------------------------------------------------------------------------
// 子组件 传递给 父组件数据
export default {
    
    
   methods: {
    
    
      childMethod() {
    
     // 子组件通过 $emit 获取父组件传递的方法，然后携带数据传给父组件
        this.$emit('method',"我是子组件");
      }
    }
}

• How the parent component uses the child component

In vue2.0, the parent component calls the child component method by $refsimplementing

//父组件
<template>
    <Children ref="child"></Children>
</template>
export default{
    
    
    import Children from './Children'
    export default{
    
    
        components:{
    
    
            Children 
        },
        mounted:{
    
    
            //调用子组件方法  这里要注意区分 child 是ref的名字
           this.$refs.child.getData(val)  //通过$refs找到子组件，并找到方法执行
        }
    }
}

The above is the communication between the vue2 subcomponent parent component

view 3

I believe that friends who can understand vue2 should understand the communication between them. Here I will communicate directly between the parent component and the child component.

• parent component

<template>
  <Children :title="我是父组件"  ref="childrenRef" @method="methodChildren"></Children >
</template>
<script lang="ts">
import Children from "./Children.vue"
import {
    
     defineComponent, ref } from "vue"
export default defineComponent({
    
    
  components: {
    
    
    Children ,
  },
  setup() {
    
    
    let msg = ref("")
    let childrenRef = ref() // 通过ref获取 子组件的实例
    
    let fun = () =>{
    
    
    	childrenRef.value.fatherFun()// 使用子组件的方法
    }
    let methodChildren = (val) => {
    
    
      msg.value = val // 这里val获取子组件传递的值
    }
    return {
    
    
      msg,
      methodChildren,
    }
  },
})
</script>

• Subassembly

<template>
  <!-- 点击调用父组件的方法 -->
  <button @click="fatherMethod">点击</button>
</template>
<script lang="ts">
import {
    
     defineComponent } from "vue"
export default defineComponent({
    
    
  name: "Children",
  props: {
    
    
    title: {
    
    
      type: String,
    },
  },
  setup(props, {
     
     emit}) {
    
    
    const fatherMethod= () => {
    
    
      emit("method", "传值给父组件")
    }
    const fatherFun= () => {
    
    
      console.log("我是子组件的方法")
    }
    return {
    
    
      fatherMethod,
    }
  },
})
</script>

The above is the communication between the front-end vue2 and vue3 components. Thank you for reading.
If you encounter other problems, you can discuss and study with me in private.
If it is helpful to you, please 点赞bookmark . Thank you~!
Pay attention to favorite bloggers and will continue to update...