vue2和vue3的父子组件传值

父子组件传值vue2版本：

父组件：

<template>
  <div id="app">
    <hello-world :title="aa" :likes="likes" :isPublished="false" :callback="aaa" @show="bbb"></hello-world> // 由attr来传入对应的，以@事件名来接受子组件所传过来的值
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
    return{
      aa: "这里是标题",
      likes: 7,
    }
  },
  methods:{
     aaa: function () {
      return this.likes++;
    },
    bbb:function (a) {
      console.log(a)
      let sum = 0;
     a.forEach(element => {
       sum+=element;
     });
      console.log(sum)
    }
  }
}
</script>

子组件：

<template>
　　<div>
  　　<p @click="callback" >{{title}}{{likes}}</p>
  　　<p v-if="isPublished">{{likes}}</p>
  　　<p @click="dorpFont"> 传值给父组件 </p> // 传值给父组件
　　</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // props:["title"],
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
　　demo：{
　　type：// 规定值的类型
　　default: // 不传值的情况下的值
　　required: // 是否能为空
　　validator: // 自定义验证

    contactsPromise: Promise // 或任何其他构造函数，这里没有每一项都写上根据需要写上对应的名字即可，后面的数据类型为此处的数据类型要求。可不写.
  },
  // emit:['show',this.parmars],
  data(){
    return {
      parmars:[3,4,5,6]
    }
  },
  mounted(){
    console.log(this.title);
  },
  methods:{
    dorpFont(){
      this.$emit('show', this.parmars);// 第一个参数为父组件中的事件属性，父组件上为@show此处则为show，后面参数为所传递的值。
    }
  }
}
</script>

vue3版本：

vue3版本中vue2的写法仍旧可以用不过vue3中添加了一个setup的方法，此处展示的就是这个方法。另外setup传值时无法访问data，methods等，只可访问props，emit，attrs，slots。

子组件：

 props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise // 或任何其他构造函数
  },
  setup(props, { emit }) { //此处第二个参数为context，可解构为{attrs，slots，emit}，props为响应式的不可解构，有需要可用toRef
      const likes = reactive(props.likes);
　　　　const { aaaa } = toRefs(props); //console.log(aaaa.value)
　　　　const aaa = toRefs(props,'aaa'} //console.log(aaa.value)
      const title = reactive(props.title);
      const isPublished = reactive(props.isPublished);
      const callback = reactive(props.callback);
      const dorpFont = () => {
        context.$emit('show', {parmars:[3,4,5,6]});
      }
      return {
        likes,
        title,
        isPublished,
        callback,
        dorpFont,
      }
  }, // 只多了一个setup，其他没有改变

父组件：

setup(){
    const title = ref("这里是标题");
    const likes = ref(7);
    const isPublished = ref(false);
    // const callback = ref(aaa); 此处的aaa为事件，考虑到可能不能传输，故此注释，可直接写function在里面传入
    function bbb(params) {
      let sum = 0;
      a.forEach(element => {
        sum+=element;
      });
      return sum
    }
    return {
      title,
      likes,
      isPublished,
      bbb,
    }
  },

在翻看文档的时候有一个疑惑就是vue3中这一部分文档没有写出父组件的写法，然后百度出来的结果中也没有在setup中的props传递动态数据的样例，所以关于动态数据的传输希望有人解惑，(setup中的props是响应式的是否代表可以在data，mounted等中对传输的值做出更改，利用其响应式的性质传输动态数据？）