一、代码运行
父组件向子组件的数据传递是通过子组件的props选项来传递的，默认的就是单项的传递方式：
<div id="app">
<input type="text" v-model="text" />
<my-components v-bind:text="text"></my-components>
</div>
var vm = new Vue({
    el: '#app',
    data() {
        return {
            text: '父组件单向'
        }
    },
components: {
    'my-components': {
        template: '#myComponent',
        props: ['text']
    }
}）
上面代码可以让数据从父组件传递到子组件，但是如果修改子组件数据传递给父组件会报错。
父组件与子组件传递数据的三种方式有：
1.父组件向子组件的单向传递；
2.父组件与子组件的双向传递；
3.父组件与子组件的单次传递。
以下为第二种双向传递方式的示例代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>父组件与子组件通信相关</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <span>父组件数据</span>
    <span>{{parent.info}}</span>
    <input type="text" v-model="parent.info" />
    <v-com :child ="parent"></v-com>
   
</div>

<template id="myComponentFirst">
    <div>
        <span style="color: #00b0e8">子组件数据双向绑定</span>
        <span>{{ child.info }}</span>
        <input type="text" v-model="child.info"/>
    </div>
</template>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                parent:{
                    info:'父组件信息'
                }
            }
        },
        components: {
            'v-com': {
                template: '#myComponentFirst',
                props:['child'],
                methods:{
                    change(){
                        this.child.info = '子组件信息'
                    }
                }
            },
        }
    })

</script>
</html>

运行结果：

其中，当第一排第二个文本框改变时第三排文本框会改变，当第三排文本框内容改变时第一排第一个文本框内容也会改变。

二、解析

1.父组件向子组件的单向传递

<my-components v-bind:text="text"></my-components>

2.上面有子组件与父组件的双向传递的示例此处就不详解。

其实vue中有一个子组件向父组件双向传递数据的属性sync（vue官网不推荐此方法），用法为：

<v-com :child.sync ="parent"></v-com>

3.父组件与子组件的单次传递

<my-second v-bind:my-second.once="second"></my-second>

*如果prop是一个对象或数组，是按引用传递。不管使用哪种绑定方式，都将是双向绑定