一. 父组件向子组件传值

父组件可在引用子组件的时候，通过属性绑定的形式（v-bind:），把需要传递给子组件的数据，以属性绑定的形式，传递到子组件的内部，供子组件使用。
但是需要在props属性数组内声明才能使用。

步骤：
1.在父组件的Vue实例中，添加components来声明子组件
2.定义子组件模板内容，并使用props接收父组件传来的信息（该信息在子组件标签中用v-bind:来绑定想要渲染的父组件信息）
3.使用props中自定义的名称代替父组件传入的信息名称，写入子组件的模板对象中

代码演示：

<div id="app">
        <!-- 父组件可在引用子组件的时候，通过属性绑定的形式（v-bind:），
        把需要传递给子组件的数据，以属性绑定的形式，传递到子组件的内部，供子组件使用 -->
        <component1 v-bind:parentmsg="msg"></component1>
    </div>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件中的数据'
            },
            methods: {},
            components: {
                component1: {
                    //props接受父组件的信息，并进行自定义名称，如传入msg，将其定义为parentmsg
                    //组件中的所有props中的数据，都是通过父组件传给子组件的
                    //props中的数据是只读的，无法重新赋值
                    props: ['parentmsg'],
                    template: '<h1>这是子组件 --- {{ parentmsg }}</h1>',
                    data() {
                        return {
                            title: 'wow',
                            content: '123'
                        }
                    }

                }
            }
        })
    </script>

二. 父组件向子组件传递方法

父组件向子组件传递方法使用的是事件绑定机制：v-on，当我们自定义了一个事件属性，例如：func，之后子组件就能够通过某些方式来调用传递进去的这个方法。

代码演示：

	<div id="app">
        <!-- 父组件向子组件传递方法使用的是事件绑定机制：v-on，
        当我们自定义了一个事件属性，例如：func，之后子组件就能够
        通过某些方式来调用传递进去的这个方法 -->
        <component2 @func="show"></component2>
    </div>
    <template id="template2">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="触发show" @click="myClick">
        </div>
    </template>

	<script>
        //定义组件模板对象，但是还没有注册组件
        var component2 = {
            //通过指定一个id，表示要去加载这个指定id 的template元素内容，当做组件的html结构
            template: '#template2',
            methods: {
                myClick() {
                    //emit原意为触发的意思
                    //$+名称，表示vue内部拥有的实例方法，与用户自定义的属性区分开
                    this.$emit('func');
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                show() {
                    console.log('调用了父组件上的show方法！');
                }
            },
            components: {
                component2
            }
        })
    </script>

三. 子组件向父组件传值

方法一
可以利用父组件向子组件传递方法的时候，进行传递参数，从而达到子组件向父组件传递信息的效果。
具体步骤为：我们可以在子组件中定义一个data属性，把信息放在子组件的data中，然后通过父组件向子组件传递的方法将这些信息作为该方法的参数，调用父组件传下来的函数，赋值给父组件的中的在data中定义的变量，这样就变相的实现了子组件向父组件传递信息的功能。

代码演示：

    <div id="app">
        <component2 @func="show"></component2>
        <p>
            {{ datamsgFormson }}
        </p>
    </div>

    <template id="template2">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="触发show" @click="myClick">
        </div>
    </template>

    <script>
        //定义组件模板对象，但是还没有注册组件
        var component2 = {
            //通过指定一个id，表示要去加载这个指定id 的template元素内容，当做组件的html结构
            template: '#template2',
            data() {
                return {
                    //这是子组件中的信息，需要传入到父组件中
                    sonmsg: {
                        name: '小头儿子',
                        age: 7
                    }
                }
            },
            methods: {
                myClick() {
                    //传入子组件中的信息参数sonmsg
                    this.$emit('func', this.sonmsg);
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
                datamsgFormson: null
            },
            methods: {
                show(data) {
                    this.datamsgFormson = data;
                },

            },
            components: {
                component2
            }
        })
    </script>

方法二
在子组件中更新父组件的值。可以通过父组件传递这个变量信息
详细参见利用v-model实现父子组件传值——子父组件同步更新