饿了么

Vue(二)header组件开发

≡放荡痞女 提交于 2020-04-09 11:06:55
一、 header 组件开发 之数据的传递 1. App.vue 引入组件 import header from './components/header/header' 2. App.vue 中注册组件 export default { components:{ v-header:header } } 3. 使用组件 <v-header :sell="sellerObj"></v-header> 解释::sell="sellerObj",这里就像一个函数传参一样把sell当成形参,sellerObj就是实参,那么父组件实参是怎么传给子组件的,通过什么传 4. 父组件向子组件传递数据 在父组件中需要将sellerObj作为数据导出,子组件通过props从父组件中获得数据,且要指定数据类型 export default { props:{ // 子组件获取 父组件 数据 sell:{ type:Object // 传递的类型 } } } 小结: 子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 5. 调用数据 <div class="logo"> <img :src="sell.avatar" alt="" width='64' height='64'/> </div>