vue子组件如何给父组件传值

130 阅读1分钟

父组件给子组件传值方法,使用props

父页面:parent.vue

 <template>
      <div class="sidebar_contianer">
         <sidebar-item :routerData="transmitData"></sidebar-item>
     </div>
  </template>
  <script>
  import sidebarItem from './sidebarItem'
  export default {
      data(){
         return{
             transmitData:{
                title:'首页',
                uuid:'123'
            }
         }
     },
    components:{
        sidebarItem
    }
 }
 </script>

第一步:用import引入子组件

第二步:在components中注入子组件

第三步:在子组件中定义一个指令:routerData="transmitData" (routerData名称需要和子组件中的props保持一致,transmitData是要传递给子组件的数据)

子页面:child.vue

  <script>
 export default {
     name:'sidebarItem',
     props:{
         transmitData:{
             type:Object,
             default:null
         }
      }
 }
  </script>

第四步:在子组件中定义props属性,transmitData的type可以自定义类型(但是必须和父组件中的数据类型一致,否则会报错),default是默认值。