vue3 父子組件間相互傳值

父向子傳值

父

  <pie-chart :pieData="post_data.pid" />

父組件只需在子組件上聲明一個變量即可。 :代表變量，可以傳變量;否則只能傳常量

子

export default {
    props:['pieData'],
    setup(props,ctx) {
        const pie_data = props.pieData

子組件中需要在props中聲明需要接收的變量名，setup中需要引用props，賦值時用props.變量名接收。return出去就可以用了

子組件向父組件傳值

父

 <submit class="submit" @e_flag="get_e_flag" />
 
const e_flag = ref(false);
    const get_e_flag = (e) => {
      e_flag.value = e;
    };

父組件需要聲明一個@方法get_e_flag接收子組件發送的值,在該方法中賦值給需要的變量

子

setup(props, ctx) {
    ……
    const spyder_go = () => {
        ctx.emit('e_flag',e_flag.value)

子組件中需要在setup中使用ctx，使用ctx.emit向父組件傳值。該方法需要調用，比如點擊或者onMounted