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>