[IMWeb训练营作业]select组件 20170424

今天学习到组件的概念。父子组件的通信。可能有兄弟组件的通信。

直接放代码HTML核心部分。 
Tips && 知识点 
  1. component可以全局注册Vue.component（“name”，{options}）或者局部注册↓↓

new Vue({**components**: 
    {
        'name': {options},
        'name': {options}
    }
 })
 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

但是局部注册的组件只能在该作用域下使用。==>推荐自己测试下。

  2. 在component下同样又data属性，但是不同于Vue实例的data属性是一个对象，component的data必须是函数，因为对象是深copy.

  3.v-for指令支持(list,index)两个参数。可以很方便取到当前遍历的数据的index值。同样如果是object，可以(value, key, index）三个参数。

  4.通过$parent.$children可以方便在兄弟组件间读写数据。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

  5.父组件通过自定义属性向自组件传值，必须显示声明props: [“attrName”],这样子组件才能获取到。 
  6.子组件通过$emit（event，[…args]）方法触发当前实例上的事件，把事件沿着作用域链向上派送。

<div id="app">
        <!-- 组件 select,可自定的一个是组件里button的value值 ，另1个是子组件ul里li的各项内容。通过select组件就是 :ul-text="arr" -->
        <custom-select class="select" btn-value="城市名" :ul-text="citys"></custom-select>
        <custom-select class="select" btn-value="空气质量" :ul-text="AQIs"></custom-select>
        <custom-select class="select" btn-value="倒序排名" :ul-text="ranking"></custom-select>
        <!-- 其中子组件的接口数据可以有 v-bind:lists="arr"提供 <custom-ul v-bind:lists="XX"></custom-ul>-->
    </div>
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

---

js部分

Vue.component("custom-select",{
    props: ["btn-value","ul-text"],
    data() { //因为有多个组件,data不能是对象。因为对象是深度copy
        return {
            ulShow: true,
            inputValue: ""
        }
    },
    template: 
        `<div>
        <input type="text" :value="inputValue" disabled>
        <input type="button" :value="btnValue" @click="ulShow = !ulShow">
        <custom-ul :lists="ulText" v-show="ulShow" @receive="showLiText"></custom-ul>
    </div>`,
    // 父组件在使用子组件的地方用 v-on 来监听子组件触发的事件：
    methods: {
        //当子组件的触发了li的点击事件，通过$emit去触发receive事件。
        showLiText(index) {
            //通过$parent $children等操作多个组件同时changeValue
            //TODO 把它们关联起来组件 
            //test
            // for (var i = 0; i < this.$parent.$children.length) {
            //  this.$parent.$children[i].inputValue = this.$parent.citys[index];
            // }

            this.$parent.$children[0].inputValue = this.$parent.citys[index];
            this.$parent.$children[1].inputValue = this.$parent.AQIs[index];
            this.$parent.$children[2].inputValue = this.$parent.ranking[index];
        }
    }
})

Vue.component("custom-ul",{
    props: ["lists"],
    template: 
        `<ul><li v-for="(listText, listIndex) in lists" @click="showLiText(listIndex)">{{listText}}</li></ul>`,
        //通过v-for提供index参数。方便同步修改三者数据
    methods: {
        showLiText(index){
            //触发当前实例上的事件，把事件沿着作用域链向上派送。
            this.$emit("receive", index)
        }
    }
})效果图：