Vue_父子间组件的数据传递

在下面的例子中，Vue实例对象即为父组件，注册的全局组件为子组件。

一. 父组件向子组件传递数据

1. 方法步骤

• (1) 用props属性给组件声明一个自定义属性(名称可以自定义 如下例子中的 tit list);
• (2) 在父组件中调用子组件时，通过上一步声明的自定义属性来传递参数。

2. 实例

实现：将父组件中的数据(titleArr 和 contList)传到子组件的相应位置中
运用：props， 全局组件(可用别法)
过程：父组件数据 --> html自定义属性绑定--> 子组件自定义属性--> 子组件相应位置-->v-for循环入值
html：

<div class="test">
    <!--tit list-->
    <tab :tit="titleArr" :list="contList"></tab>
</div>

javascript：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
//全局组件
Vue.component("tab",{
    //tit list  --- 自定义属性
    props:["tit","list"],
    template:`<div :style="objhead">
                <div :style="clearFloat" >
                    //tit
                    <div :style="hContent" v-for="val in tit">{{val}}</div>
                </div>
                <ul >
                    //list
                    <li :style="clearFloat" v-for="val in list">
                        <div :style="hContent">{{val.name}}</div>
                        <div :style="hContent">{{val.price}}</div>
                        <div :style="hContent">{{val.num}}</div>
                    </li>
                </ul>
            </div>`,
    data:function(){
        return {
            objhead:{
                width:"600px",
                background:"#eee",
            },
            hContent:{
                float:"left",
                width:"33.33%",
                lineHeight:"35px",
                textAlign:"center",
                border:"1px solid #666",
            },
            clearFloat:{
                overflow:"hidden"
            }
        }
    }
})
var vmTest = new Vue({
    el:".test",
    data:{
        titleArr:["商品名称","价格","数量"],
        contList:[
            {name:"青菜",price:12,num:4}
        ]
    }
})
</script>

css

*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}

可以自定义

---

二. 子组件向父组件传递数据

1. 方法步骤

• (1) 在子组件中定义一个事件；
• (2) 在子组件定义的事件中通过$emit方法传递数据（且定义一个事件名称用于html中）；
• (3) 在父组件中注册一个 通过(第三步)$emit定义的事件；
• (4) 通过父组件中注册的事件获取到数据。

2. 实例

实现：将子组件li的index传递到父组件中
运用：$emit ， 局部组件(可用别法)
html：

<div id="app">
    <!--toparent---子组件中通过$emit定义的事件-->
    <test @toparent="getson"></test>
</div>

js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
//局部组件
var test = {
    template:`
        <div>
            <ul>
                <li @click="getIndex(index) v-for="(val,index) in list">{{val}}</li>
            <ul>
        </div>
    `,
    data:function(){
        return {
            list:["html","css","js"]
        }
    },
    methods:{
        getIndex(index){
            console.log({index});
            //重点***这里的第一个参数即是html里的事件,第二个参数（被传递的即是传递给父组件的数据res）也可以是个数组。
            this.$emit("toparent",[index,this.list]);
        }
    }
}
var vm = new Vue({
    el:"#app",
    components:{
        //实例化局部组件
        test
    },
    methods:{
        getson(res){
            //接受到子组件的数据
            console.log({res})
        }
    }
})
</script>

* 注意坑点：

html中不区别大小写，而javascript区别大小写，为了防止出错，统一小写。
组件模板只能有一个根节点！！！