vue基础教学（6）

一、父组件引入子组件
1.1.引入组件

import shoplist from '../shoplist.vue'

1.2.注册组件

components: {
            shoplist
        }

1.3.使用组件

<shoplist></shoplist>

2.父组件定义数据
2.1.定义数组
 

  const shoplistarr = [{
            img: "../../static/index/gsdz.png",
            shoplistname: "XDT190E托链轮总成（X-G）",
            newprice: "354",
            oldprice: "354"
        }
        , {
            img: "../../static/img/活动1.png",
            shoplistname: "XDT190E托链轮总成（X-G）",
            newprice: "354",
            oldprice: "354"
        }, {
            img: "../../static/img/活动2.png",
            shoplistname: "XDT190E托链轮总成（X-G）",
            newprice: "354",
            oldprice: "354"
        }, {
            img: "../../static/img/我的2.png",
            shoplistname: "XDT190E托链轮总成（X-G）",
            newprice: "354",
            oldprice: "354"
        }
    ]

2.2.把数据放入data中

data() {
            return {
                shoplistarr
            }
        },

3.父组件传值
3.1.在父组件使用子组件的标签内使用v-bind绑定父组件定义的数据
3.2.：shoplistarr要和子组件props接收的名字一致
3.3.“shoplistarr”应为data中的数据

<shoplist  :shoplistarr="shoplistarr"></shoplist>

4.子组件接收数据
4.1.props接收指定数据

props: {
            shoplistarr: Array
        }

4.2.使用数据
直接在<template>里面使用{{shoplistarr}}就可

<view>
        <view class="shoplistxq1" v-for="item in shoplistarr">
            <img :src="item.img">
            <div class="shoplistname1">{{item.shoplistname}}</div>
            <div class="newprice1">
                ￥{{item.newprice}}
                <span class="oldprice1">￥{{item.oldprice}}
                </span>
            </div>
        </view>
    </view>

二、子传父通过自定义事件，this.$emit（"自定义方法名1"，需要传的值）进行传值。

本文父组件：shopping.vue

子组件：shoplist.vue

1.第一步，在父组件中引入子组件（父组件内）

import shoplist from '../shoplist.vue'

2.在子组件内定义数据（子组件内）

data() {
            return {
                children:"this is children"
            };
        },

3.自定义一个方法，用于触发传值事件（子组件内）

<button @click="pass">子传父</button>

4. 通过方法传值（子组件内）

$("第一个参数为自定义方法名"，第二个参数为需要传递的值)

methods:{
            pass(){
                this.$emit("passfunction",this.children)
            }
        },

 5.在父组件定义一个自定义事件2接收子组件传递过来的事件（父组件内）
等于号前面@passfunction需和子组件自定义方法名一样

等于号后面为父组件自定义方法名，需和下方的方法名对应

<shoplist   @passfunction = "meetfunction"></shoplist> 

6.在data中定义一个值用来存储接收的值（父组件内）
通过自定义方法2接收传递过来的值（父组件内）

data() {
            return {
                meetdata:[],
            }
        }, 

methods: {
            meetfunction(val){
                this.meetdata = val
            }
        },