How do I set the default value for vue parent-to-son props,? why can't I use my default?

how do I set the default value for vue parent-to-son props, and why doesn"t my default work?

parent one

        <two :message="ac" :acacacac="aaa"></two>
        
         import two from "./two";
            
        data(){
        return{
            aaa:"",
            ac:"",
        }
    },
    components:{
        two
    },

parent two

    <div>
     <div></div>
      {{message}}
      {{acacacac}}
  </div>


 props:{
        message:{
            default:""
        },
        acacacac:{
            default:""
        }
    },

Why doesn"t it work?

Mar.02,2021

two ways of writing.

    <div>
     <div></div>
      {{message}}
      {{acacacac}}
  </div>


 props:{
        message:{
            type: String,
            default:""
        },
        acacacac:{
            type: String,
            default:()=>{
                return ''
            }
        }
    },

the subject can try ac: undefined to be effective while aaa: " is invalid. On the surface, it seems to be a little mentally retarded

.

parent component:

 data() {
    return {
      ac: undefined,//
      aaa: ""//
    };
  }
  

Sub-component:

export default {
  name: "two",
  props: {
    message: {
      type: String,
      default: ""
    },
    acacacac: {
      type: String,
      default: ""
    }
  }
};

result:

clipboard.png

Menu