目前vue3已经出来很久了, 还是有很多朋友开发的项目还处于vue2

本人有幸, 刚接触的的项目就是vue3, 今天就看看vue2和vue3中的父子间传值有什么不同, 以及注意点......

vue2的父子间传值

基本写过vue项目的话, 应该不会陌生, 比较简单

//1. 父传子
父: 
<template>
  <div>
    <Child :num="num" ></Child>  //子组件使用
  </div>
</template>

<script>
import Child from "找到子组件路径"
export default {
  components: {
    Child,  //需要注册一下
  },
  data() {
    return {
      num: 1,
    };
  },
};
</script>

子: props:["num"]   //在子组件中定义一下就可以直接使用了


//2. 子传父------------------------------------------------------------------------
子: 
<template>
  <div>
    <button @changeNum1> 改变父组件值的按钮</button>  //注意看这里
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //触发方法
    changeNum1(){
      this.$emit("changeNum2", 参数) //触发父组件自定义的事件
    }
  }
};
</script>

父: 
<Child  @changeNum2="changeNum3" ></Child>
changeNum3(参数){
    this.num = 参数
}

vue3的父子间传值

其实基本步骤差不多, 只是稍微有点改变

父:
<template>
    <Child :num="num"> </Child>
</template>
<script lang="ts">
    import { efineComponent,......} from 'vue';
    import { Child } from '引入子组件';

    export default defineComponent({
            components:{Child}        //注册

            setup(props,{emit}){
                const num = ref(0)
                return{
                    num
                }
            }
    }
</script>

子:
<template>
    <div> {{num}} </Child>
</template>
<script lang="ts">
import { efineComponent,......} from 'vue';
export default defineComponent({
	props:{ 
            num:{
                type:Number,
                default:10
            }
        }
	setup(props,{emit}){
            ......
        }
}
</script>







// 子传父--------------------------------------------------------------------
//注意点
1. 子传父的时候, 需要emit来显式抛出

父: 
<template>
    <Child :num="num" @updatenum1="updateNum2"> </Child>
</template>
<script lang="ts">
import { defineComponent,......} from 'vue';
import { Child } from '引入子组件';
export default defineComponent({
        components:{Child}
	setup(props,{emit}){
            const updateNum2(val){
                ......
            }
            
            return{
               updateNum2
            }
            
        }
}
</script>

子:
<script lang="ts">
import { defineComponent,......} from 'vue';
export default defineComponent({
	props:{ num:{type:Number,default:10} }
	emit:["updatenum1"]              //抛出
	setup(props,{emit}){
            const fn = ()=>{
                emit('updatenum1',100)   //触发父组件的自定义事件
            }
            return{
               fn
            }
    }
}
</script>

vue3的父子间传值(setup语法糖)

vue3.2新增了setup语法糖, 所以写法又有一丁丁改变

父:
    <Child :num="num" @updatenum1="updateNum2"> </Child>
    
    <script lang="ts" setup>
        import Child from "./child.vue"  //不用注册,直接引入就可以调用子组件了
        
        const num= ref(0)          //在此处定义的 num 可以直接使用
        const updateNum2= (val) => {  //函数也可以直接引用,不用在return中返回
            console.log('val值是' , val)
            ......
        }
    </script>

子:
<template>
    <div>{{num}}</div>
    <button @click="fn">改变数值</button>
</template>
<script lang="ts" setup>
        import { defineEmits, defineProps} from "vue";
        //获取props: 接收父组件传过来的值
        let props = defineProps({
            num:{
                type:Number,
                default:10
            }
        })

        //声明触发事件
	let emit = defineEmits<{	                       //定义写法1---------------------
             (e:'updatenum1',n:Number):void,
             ......
        }>()

	let emit = defineEmits( [ "updatenum1" , ..... ] )	//定义写法2------------------
        
        
        const fn = ()=>{
            emit('updatenum1',100)
        }
</script>