Vue2+Vue3组件间通信方式汇总（1）------props

三水木雨2023-12-23 3:44

一、props (父传子，子传父)

------Vue2

------Vue3

从Vue2(组合式API)和Vue3（选择式API）两个版本对每个组件间通信方式进行讲解：

一、props (父传子，子传父)

------Vue2

父组件：

javascript 复制代码

<template>
  <div>
     <child :childValue="parentValue" :childFunc="fatherFunc"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
 export default{
  components:{
    Child 
 },
  data(){
return{
     parentValue:"儿子，我是爸爸"
       }
},
  methods:{
    fatherFunc(data){
           console.log("儿子："，data,"爸爸："，'hello，儿子！')
                   }
         }
}
</script>

子组件：

javascript 复制代码

<template>
 <div>
 <p>{{childValue}}</p>
 <button @click="baba">儿子呼唤道："爸爸!"</button>
</div>
</template>
<script>
 export default{
  props:["childValue","childFunc"],//childValue只能读取，不能被修改
  data(){
    return{
      papa"爸爸！"
       }},
  methods:{
    baba(){
        this.childFunc(this.papa)；
        }
    }
}
</script>

页面最终结果展示：儿子，我是爸爸，

控制台显示结果：儿子：爸爸！爸爸：hello，儿子！

props可以传数组也可以传对象，详情可以到Vue官网查看入门手册。

------Vue3

父组件：

javascript 复制代码

<template>
  <div>
     <child :childValue="parentValue" :childFunc="fatherFunc"></child>
  </div>
</template>
<script setup lang="ts">
import Child from "./Child.vue"
import {ref} from "vue"
let parentValue = ref("爸爸！")；
let fatherFunc=(data)=>{
        console.log("儿子："，data,"爸爸："，'hello，儿子！')
       }
</script>

子组件：

javascript 复制代码

<template>
 <div>
{{props.childValue}}//props可以省略，直接写childValue
<button @click="handleClick">点击</button>
</div> 
</template>
<script setup lang="ts">
let props=defineProps(["childValue","childFunc"]) //childValue只能读取，不能被修改
let handleClick=props.childFunc(props.childValue);
</script>

页面展示的结果：爸爸！

控制台展示结果：儿子：爸爸！爸爸：hello，儿子！