vue2.0中组件传值理解-原创手记-慕课网

vue学习一般先从官网学习开始（https://cn.vuejs.org/）
因为英语水平一般，所以也就从中文文档开始撸起。
vue中比较好理解的部分包括：
1.声明式渲染
2.条件和循环
3.处理用户输入（表单输入相关）
以上官网也对应有相关例子，比较容易理解
实际项目中最常用到也是有点难理解的是组件相关的内容。组件可以理解为一个拥有自定义选项的vue实例，在我的理解就是可以重复使用的网页的一部分（包含DOM结构以及数据逻辑变化）。
我就以我理解的谈谈组件传值：
一：父组件向子组件传值
1)组件的创建

<template>
    <div>
            <h2>子组件Child</h2>
            <p>{{ msg }}</p>
    </div>
</template>
<script>
export default{
    props:['msg']
}
</script>

2.组件注册

<template>
    <div id="app">
            <child msg = "hello vue"></child>
    </app>
</template>
<script>
    import child from './components/Child'
    export default{
        name:'app'，
        components:{
            child
    }
}
</script>

此时可以在浏览器中看到hello vue值已经传递过去；
我们也可以将msg的值用v-bind动态绑定

<template>
    <div id="app">
            <child :msg = "showMsg"></child>
    </app>
</template>
<script>
    import child from './components/Child'
    export default{
        name:'app'，
      data(){
            return{
                    msg:'hello parentComponent'
        }
    },
        components:{
            child
    }
}
</script>

总结：父组件向子组件传值四部走：
1.子组件在props中创建一个属性，用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件在props中创建的属性
4.把需要传给子组件的属性赋值

二子组件向父组件传值
1.在子组件中创建一个按钮，并绑定一个点击事件,同时在响应该事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

<template>
    <div>
            <h2>子组件Child</h2>
            <p>{{ msg }}</p>
            <button v-on:click="sendMsgToParent"></button>
    </div>
</template>
<script>
 export default{
        props:['msg'],
        methods:{
                sendMsgToParent:function(){
                        this.$emit('listenChildEvent','this msg from child')；
                }
        }
}
</script>

2)在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<template>
    <div id="app">
            <h2>父组件Child</h2>
            <child msg="hello vue"  v-on:listenChildEvent="showMsg"></child>
    </div>
</template>
<script>
 export default{
       name:'app',
        methods:{
                showMsg:function(data){
                        alert(data)；
                }
        }
}
</script>

总结：
1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

三组件与组件之间通信可以用vuex来管理非常方便。

学习一门语言最快的方法就是自己去实践，写一些简单功能的页面。现在有很多开源的api接口提供出来，或者自己模拟数据。总之，坑要自己踩了才会走的更快。