vue学习记录

vue从json中遍历图片地址

<template>
  //例如v-for="item in getMenuItems" :key="item.title"
  <img :src="item.imgsrc">
</template>
<script>
export default {
  data () {
    return {
      imgsrc: require('../../images/ICON-electronicbilling.png')
    }
  }
}
</script>
 

vue从子组件静态数据传递到父组件

1.首先在子组件中定义一个方法，通过按钮触动方法，此方法是子组件向父组件传值

<div class="settlement col-xs-3"><a @click="settlement">结算</a></div>

methods:{
			settlement(item){
                this.$emit("settlementBill","我是静态值");                             
            //子向父事件传值   第一个是事件名，后面的是传的内容
				this.$router.push({path:'/ShoppingCart'});
			},

2.父组件在体现子组件的html结构处，绑定子组件定义的方法。

<router-view v-on:settlementBill="updateBill($event)"></router-view>

settlementBill就是子组件方法名，updateBill是父组件接收数据的方法，$event是个死值，不能修改

3.父组件data中定义接受的载体

data(){
    return{
      title:"用来接收从Menu传来的静态值"           
    }

4.父组件定义接收方法

 methods:{
          updateBill(title){
          this.title=title;                                                     
        //this.title是父组件的title，第二个title是子组件传来的值，方法里面的title形参
          },
    }
}

5.随后在需要使用传递来的值的地方接收一下

<router-view v-on:settlementBill="updateBill($event)" v-bind:title="title"></router-view>

此时就完成子组件传递静态值给父组件

那如果需要传递多个值时，可以把多个值做成一个对象

首先需要把需要传递的数据在子组件中封装成对象

data(){
			return{
				Menu:{
					baskets:this.baskets,
					totalPrice:this.totalPrice
				},

随后把子组件传值方法静态数值改为对象

		methods:{
			settlement(item){
				this.Menu.baskets = this.baskets;     //取不到数据时才需要这一步
				this.Menu.totalPrice = this.totalPrice;
                this.$emit("settlementBill",this.Menu);                             //子向父事件传值   第一个是事件名，后面的是传的内容
				this.$router.push({path:'/ShoppingCart'});
			},

之后的和静态数值一样，就把静态数值改为对象就行了

父组件向子组件传值

首先数据在父组件中，在父组件中找到与子组件关联的地方，绑定一下       v-bind:Menu="Menu"   //前面Menu是自定义名字，后面Menu是父组件中的data中的名字

<router-view v-on:settlementBill="updateBill($event)" v-bind:Menu="Menu"></router-view>

然后在子组件中拿一下这个数据，拿的是父组件中自定义的名字Menu，增加一个  props:["Menu"],就可以了

export default {
  props:["Menu"],
  data () {

一上这种写法不是官方写法，官方写法是写成一个对象

  props:{
     Menu:{
      type:Object,
      required:true
     }

 

 

 

购物车和菜单里面很多方法一样，能否公用