Vue组件传值（一）之 父子之间如何传值

Vue中组件之间是如何实现通信的？

　　1、父传子：

　　　　父传子父组件通过属性进行传值，子组件通过 props 进行接受； 

父组件中：

<template>
    <div id="box">
        我是父组件
        <Child :msg="info"/>
    </div>
</template>
<script>
import Child from './child';
export default {
    data:function(){
        return {
            info:"时间是把杀猪刀"
        }
    },
    components:{
        Child
    }
}
</script>

　　　　　　props 接收值的方式有两中：一种是数组另一种是对象；

数组：虽然可以接收 props 传值但是不能定义传值的类型、默认值；

 1 <template>
    <div>
        我是子组件
        <p>我是接受到父组件传过来的值：{{msg}}</p>
    </div>
</template>
<script>
export default {
    props:['msg'],
    data:function(){
        return {

        }
    }
}
</script>

对象：接收值的方式可以定义值的类型； 

 1 <template>
    <div>
        我是子组件
        <p>我是接受到父组件传过来的值：{{msg}}</p>
    </div>
</template>
<script>
export default {
    props:{
        msg: String
    },
    data:function(){
        return {

        }
    }
}
</script>

　　props 通过对象接收还可以定义其他东西，也可以利用这些来实现封装一些组件方便下次使用直接调用就好，下面来看一下:

 //必填的字符串
    props:{
        msg: {
            type: String,
            required: true
        }
    }
// 带有默认值的数字
    props:{
        msg: {
            type: Number,
            default: 100
        }
    }
// 带有默认值的对象
    msg: {
        type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
            default: function () {
                return { message: 'hello world' }
          }
    }
        

 　　　　props 更多使用方法可以参考官网：　https://cn.vuejs.org/v2/guide/components-props.html　

　　2、子传父：

　　　　当子组件给父组件进行传值的时候，要在子组件标签内定义自定义方法 ( 注意自定义方法的函数不需要加( ) )

　　　　在子组件内通过 this.$emit ( ) 触发这个方法; 参数1 是自定义的方法名称; 参数2 是需要传递的参数;

父组件中：

<template>
    <div id="box">
        我是父组件
        <p>我是接收的子组件传过来的值：{{info}}</p>
        <Child @sendInfo="getInfo"/>
    </div>
</template>
<script>
import Child from './child';
export default {
    data:function(){
        return {
            info:""
        }
    },
    methods:{
        getInfo(msg){
            this.info = msg;
        }
    },
    components:{
        Child
    }
}
</script>

子组件中：

<template>
    <div>
        我是子组件
        <button @click="handleClick">我要向父组件传值</button>
    </div>
</template>
<script>
export default {
    methods:{
        handleClick(){
            this.$emit('sendInfo','第二个参数写你要传递的内容')
        }
    }
}
</script>

 

　　下一章推出非父子组件之间通信和如何利用原生JS实现$on、$emit、$off 来实现非父子组件之间的通信；