Vue父组件传值

Vue父组件传值 (vue-cli 3.11.1)

子组件

1. prop

   props: {
       path: String,
       activeColor: {
         type: String,
         default: "red",
       },
   

父组件

1. data

    data() {
       return {
         activeColor: "#ff5777",
         //  activeColor: undefined,
       };
     },
   

2. 元素

    <tab-bar-item path="/home" :activeColor="activeColor">
           <template v-slot:item-icon>
             <img src="~assets/img/tabbar/home.svg" alt="" />
           </template>
           <template v-slot:item-icon-active>
             <img src="~assets/img/tabbar/home_active.svg" alt="" />
           </template>
           <template v-slot:item-text>
             <div>首页</div>
           </template>
         </tab-bar-item>
   

备注

• 若传递的值不是动态的，无需绑定 如：path="/home"
• 字段名称要保持一致