vue2和vue3 子组件父组件之间的传值方法网站首页 其他

vue2和vue3 子组件父组件之间的传值方法

下一站丶 2024-06-22 18:01:03

简介vue2和vue3 子组件父组件之间的传值方法

vue父组件子组件传值 vue2和vue3子组件父组件之间的传值方法

在组件化开发的过程中难免会遇见子组件和父组件之间的通讯那么这里讲关于vue2和vue3不同的通讯方式

先看一下vue2

父组件向子组件传递参数

父组件通过 :语法其实就是v-bind 来传递参数
子组件通过 props来获取父组件传递的方法

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

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

子组件向父组件传递参数（这里同时讲了父组件向子组件传递方法）

父组件通过 @语法其实就是v-on 来传递方法
子组件通过 $emit来获取父组件传递的方法同时向父组件传递数据

<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',"我是子组件");
      }
    }
}

父组件使用子组件的方法

vue2.0里面父组件调用子组件的方法是通过$refs实现的

//父组件
<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找到子组件，并找到方法执行
        }
    }
}

以上就是 vue2 子组件父组件之间的通讯

vue3

相信能看懂 vue2的小伙伴应该理解之间的通讯这里我就直接在父组件和子组件进行通讯

父组件

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

子组件

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