vue父組件子組件傳值 vue2和vue3子組件父組件之間的傳值方法

在組件化開(kāi)發(fā)的過(guò)程中難免會(huì)遇見(jiàn) 子組件和父組件之間的通訊那么這里講關(guān)于vue2和vue3不同的通訊方式

先看一下vue2

• 父組件向子組件傳遞參數(shù)

父組件通過(guò) :語(yǔ)法 其實(shí)就是v-bind 來(lái)傳遞參數(shù)
子組件通過(guò) props來(lái)獲取父組件傳遞的方法

億點(diǎn)小知識(shí):子組件接收到數(shù)據(jù)之后，不能直接修改父組件的數(shù)據(jù)。會(huì)報(bào)錯(cuò)

// 父組件 parent 像子組件傳遞 msg 值
<template>
    <Children :datum="'我是父組件的數(shù)據(jù)'"></Children>
</template>
?----------------------------------------------------------------------------------
// 子組件 接收 父組件 傳遞的數(shù)據(jù)
export default {
  // 寫(xiě)法一 用數(shù)組接收
  props:['datum'],
  // 寫(xiě)法二 用對(duì)象接收，可以限定接收的數(shù)據(jù)類型、設(shè)置默認(rèn)值、驗(yàn)證等
  props:{
      datum:{
          type:String,
          default:'這是默認(rèn)數(shù)據(jù)'
      }
  },
  mounted(){
      console.log(this.datum)// 我是父組件的數(shù)據(jù)
  },
}

• 子組件向父組件傳遞參數(shù) （這里同時(shí)講了父組件向子組件傳遞方法）

父組件通過(guò) @語(yǔ)法 其實(shí)就是v-on 來(lái)傳遞方法
子組件通過(guò) $emit來(lái)獲取父組件傳遞的方法 同時(shí)向父組件傳遞數(shù)據(jù)

<template>
    <Children @method="method"></Children>
</template>
<script>
  import Children from './Children';
  export default {
    components: {
      Children
    },
    methods: {
      method(data) { // 這里的 data 就是子組件傳遞的參數(shù) 如果參數(shù)擁有多個(gè)可以使用 ...語(yǔ)法獲取參數(shù)
        console.log(data);// 子組件傳遞的參數(shù)
      }
    }
  };
</script>
?----------------------------------------------------------------------------------
// 子組件 傳遞給 父組件數(shù)據(jù)
export default {
   methods: {
      childMethod() { // 子組件通過(guò) $emit 獲取父組件傳遞的方法，然后攜帶數(shù)據(jù)傳給父組件
        this.$emit('method',"我是子組件");
      }
    }
}

• 父組件使用子組件的方法

vue2.0里面父組件調(diào)用子組件的方法是通過(guò)$refs實(shí)現(xiàn)的

//父組件
<template>
    <Children ref="child"></Children>
</template>
export default{
    import Children from './Children'
    export default{
        components:{
            Children 
        },
        mounted:{
            //調(diào)用子組件方法  這里要注意區(qū)分 child 是ref的名字
           this.$refs.child.getData(val)  //通過(guò)$refs找到子組件，并找到方法執(zhí)行
        }
    }
}

以上就是 vue2 子組件父組件之間的通訊

vue3

相信能看懂 vue2的小伙伴 應(yīng)該理解之間的通訊 這里我就直接在父組件和子組件進(jìn)行通訊

• 父組件

<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() // 通過(guò)ref獲取 子組件的實(shí)例
    
    let fun = () =>{
    	childrenRef.value.fatherFun()// 使用子組件的方法
    }
    let methodChildren = (val) => {
      msg.value = val // 這里val獲取子組件傳遞的值
    }
    return {
      msg,
      methodChildren,
    }
  },
})
</script>

• 子組件

<template>
  <!-- 點(diǎn)擊調(diào)用父組件的方法 -->
  <button @click="fatherMethod">點(diǎn)擊</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>

以上就是前端vue2和vue3組件之間的通訊感謝大家的閱讀
如碰到其他的問(wèn)題 可以私下我 一起探討學(xué)習(xí)
如果對(duì)你有所幫助還請(qǐng) 點(diǎn)贊 收藏謝謝~！
關(guān)注收藏博客 作者會(huì)持續(xù)更新…文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-485148.html

到了這里，關(guān)于vue2和vue3 子組件父組件之間的傳值方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！