5.组件（2）之子级传父级

面试会问：

***双向数据绑定（数据和视图） v-model

***单向数据流动（父级数据和子级数据的流动）

　　数据从父级流向子级，数据本身还是父级的。如果操作子级要改变父级的数据，

　　只能通过子级告知父级要操作哪个数据，然后让父级去修改数据。（简单点说：子级不能修改父级的数据，让父级改子级的数据）

子传父：

1.在子组件上绑定一个自定义事件，并且传入父级的“事件”处理函数

比如：

　　@changeboolean 是子组件定义的

　　changC 父组件中定义的

2.在子组件内部监听这个自定义的事件（满足自定义函数的条件就执行)

　　this.$emit(自定义的事件名，参数)

比如：

　　change(){

　　　　this.$emit('changeboolean',id,xx)

　　}

例子：DOM部分：

<div id="app">
　　<input type="text" v-model='val' @keyup.13='add'>
　　{{arr}}
　　<hr>
　　<h2>子组件</h2>
　　<list :data='arr' @changboolean='changeC'></list>  //1
</div>

script部份：

let obj = {
    template:`
        <div>
            <ul>
                <li v-for='(val,key) in data'>
                    <input type='checkbox' 
                        @change='change(val.id,$event)'    //传入（id，事件源）
                    >
                    <span>{{val.txt}}</span>
                </li>
            </ul>
        </div>
    `,
    props:{
        data:{
            type:Array, 
            default:[] 
        }
    },
    methods:{
        change(id,ev){ //接收到（id，事件源）
            //console.log(ev.target.checked)
            this.$emit('changboolean',id,ev.target.checked)  //2  自定义了一个函数，并且传入实参（id，事件源的布尔值）
        }
    }
}
Vue.component('list',obj);
new Vue({
    el:'#app',
    data:{
        val:'',
        arr:[
        {
            id:1,
            txt:'郭德纲',
            checked:false
        },
        {
            id:2,
            txt:'于谦',
            checked:false
        },
        {
            id:3,
            txt:'周杰伦',
            checked:false
        }
        ]
    },
    methods:{
        add(){
            this.arr.push({
                id:+new Date,
                txt:this.val,
                checked:false       
            });
            this.val = ''
        },
        changeC(id,bool){  //父级接收到数据（id，布尔值），并进行处理】
            this.arr.forEach(e=>{
                if(e.id==id){
                    e.checked = bool;
                };
            });
        }
    }
})

5.组件（2） 之 子级传父级

猜你喜欢

5.组件（2）之子级传父级