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等中對傳輸的值做出更改，利用其響應式的性質傳輸動態數據？）