vue2.0子组件和父组件之间的传值

开始之前请先自行按照vue官方文档搭建项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev 

好了，这个时候就已经有了一个全新的vue项目

其实用到子组件和父组件之间传值的同学，应该都有一部分vue的使用经验了

那我们就直接上代码吧！

父组件 → 子组件

子组件child.vue

<script>
    export default{
        props：["msg"]
    }
</script>

父组件parent.vue

<script>
    import ChildPage from "./child"
    export default{
        data(){
            return {
                statu:"hello word!"
            }
        }
        components:{
            ChildPage
        }
    }
</script>

这个时候就可以来一波测试了

来一波总结：

子组件 → 父组件

子组件child.vue

<script>
    export default{
        props：["msg"],
        methods:{
            childMsg(){
                this.$emit("getChildMsg","vue is very good!")
            }
        }
    }
</script>

父组件parent.vue

<script>
    import ChildPage from "./child"
    export default{
        data(){
            return {
                statu:"hello word!"
            }
        },
        methods:{
            showChildMsg(data){
                console.log(data);
            }
        }
        components:{
            ChildPage
        }
    }
</script>

惯例，测试，总结。

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

差不多了吧，感觉我这个有问题或者你有问题的，欢迎留言！！