vue 父子组件通信

图示：

1.父组件向子组件传值

父组件可以在引用子组件的时候，通过属性绑定的形式，把数据传递给子组件

小例子:

	<div id='app'>
        <cpn :cmessage="message" :clist="list"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>{{cmessage}}</h1>
            <ul>
                <li v-for="item in clist">{{item}}</li>
            </ul>
        </div>
    </template>
    <script>
        const cpn = {
            template: "#cpn",
            props: ["cmessage", "clist"]
        }
        let vm = new Vue({
            el: '#app',
            data: {
                list: ['杯子', '被子', '凳子', '桌子', '椅子'],
                message: "我是父组件传来的值"
            }
           
        })

效果：

2.子组件向父组件传递数据时

通过触发自定义事件，把数据作为参数传递给父组件

例子：

 <div id='app'>
        <h1>这里是父组件</h1>
        <p>从子组件传来的数据是:{{message}}</p>
        <hr>
        <cpn v-on:tosend="receive"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>这是子组件，有个数据是:{{cmessage}}</h1>
            <button @click="send">传递</button>
        </div>
    </template>
    <script>
        let vm = new Vue({
            el: '#app',
            //数据
            data: {
                message: ''
            },
            //方法集合
            methods: {
                receive(cmessage) {
                    this.message = cmessage
                }
            },
            components: {
                cpn: {
                    template: `#cpn`,
                    data() {
                        return {
                            cmessage: "子组件数据"
                        }
                    },
                    methods: {
                    //子组件事件
                        send() {
                            this.$emit("tosend", this.cmessage)
                        }
                    }
                }
            }
        })

效果(未点击前)：

点击后：

注意：组件命名和事件命名浏览器会解析成小写！！