vue 第六次学习笔记
组件间数据传递
AJAX--Axios
路由--router
webpack-vue 结构讲解
----------------------------------------------
0:8:26
组件
<table>
<!-- <my-row></my-row> -->
<tbody is="my-row"></tbody>
</table>
特殊情况 用is
----------------------------------------------
组件间数据传递
props:['message','message2'] , //父传到子 接收
----------------------------------------------
这个教程估计要重看
----------------------------------------------
AJAX--Axios
这个要安装
axios
bower install axios
----------------------------------------------
子组件和父组件传参
home.vue <HomeNavView message="哈喽"></HomeNavView>
<HomeNavView :message="demo"></HomeNavView>
import HomeNavView from './HomeNav.vue'; components:{ HomeNavView, },
子组件
<template>
<div class="home_n">
<nav class="m_nav">
<ul>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav0.png" alt="">
<span>京东超市</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav1.png" alt="">
<span>全球购</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav2.png" alt="">
<span>服装城</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav3.png" alt="">
<span>京东生鲜</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav4.png" alt="">
<span>京东到家</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav5.png" alt="">
<span>充值中心</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav6.png" alt="">
<span>惠赚钱</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav7.png" alt="">
<span>领券</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav8.png" alt="">
<span>物流查询</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav9.png" alt="">
<span>{{message}}</span>
</a>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default{
props:["message"],
data(){
return{
aa:1,
}
},
}
</script>
子组件和父组件传参
子组件代码
<template>
<div class="home_n">
<nav class="m_nav">
<ul>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav0.png" alt="">
<span>京东超市</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav1.png" alt="">
<span>全球购</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav2.png" alt="">
<span>服装城</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav3.png" alt="">
<span>京东生鲜</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav4.png" alt="">
<span>京东到家</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav5.png" alt="">
<span>充值中心</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav6.png" alt="">
<span>惠赚钱</span>
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav7.png" alt="">
<span>领券</span>
</a>
</li>
<li class="nav_item" @click="childClick">
<a href="#" class="nav_item_link">
<img src="../assets/images/nav8.png" alt="">
<span>{{childValue}}</span>
</a>
</li>
<!--代码在上面-->
</ul>
</nav>
</div>
</template>
<script>
export default{
data(){
return{
aa:1,
childValue: '我是子组件的数据'
}
},
methods:{
childClick(){//子穿父
// childByValue是在父组件on监听的方法
// 第二个参数this.childValue是需要传的值
this.$emit('childByValue', this.childValue);
}
}
}
</script>
父组件代码
<template>
<div class="home">
<div class="m_layout">
<HomeNavView v-on:childByValue="childByValue"></HomeNavView>
<!--接受参数列子-->
</div>
</div>
</template>
<script>
import HomeNavView from './HomeNav.vue';
export default{
data(){
return{
childValue:"",
}
},
components:{
HomeNavView ,
},
methods:{
childByValue(childValue){
this.name = childValue;
}
}
}
</script>
<style>
</style>
