vue之父子组件通信

直接代码展示吧  简单易懂

 var li = ['睡觉', '吃饭','打豆豆']

 li为初始化的数据

 new Vue({
        el: '#app',
        components: {
            todo: {
                template: `<div>
                      <h2>待办事项</h2>
                    <lisi :s="li" @d='detele'></lisi>
                    <add @x='sumbit'></add>
                    </div>`,
                data() {
                    return { li }
                },
                methods: {
                    sumbit(t) {
                        this.li.push(t)
                    },
                    detele(i) {

                        this.li.splice(i, 1)
                    }
                },
                components: {
                    add: {
                        template: `
                        <div>
                        <input type="text" ref="t">
                        <button @click="sumbit()">添加</button>
                            </div>`,
                        methods: {
                            /*子组件-->父组件传值用$emit('事件名',父组件需要的参数)
                            在父组件中显示的子组件绑定事件@x='sumbit'
                            <add @x='sumbit'></add> 然后再子组件中使用this.$emit('x'
                            父组件需要的参数) 注:绑定事件与子组件在父组件中显示的事件名相同*/`在这里插入代码片`
                            sumbit() {
                                this.$emit('x', this.$refs.t.value)
                                this.$refs.t.value = ''
                            }
                        }
                    },
                    lisi: {
                        props: ['s'],/*
                        父组件-->子组件传值:首先在父组件中包含的子组件绑定变量接收数据
                         <lisi :s="li"></lisi> 然后在子组件中用 props: ['s']接收,*/
                        template: ` 
                        <ul>
                      <li v-for="(v,i) in s ">
                       {{v}}
                    <button @click="detele(i)">x</button></li>
             </ul>`,
                        methods: {
                            detele(i) {
                                this.$emit('d', i)
                            }
                        }
                    }
                }

            }
        }
    })