Vue父子组件传值

在进行组件传值之前需要先掌握以下基础知识：

1：传值类型：

除了可以传递string外，还可以向子组件传递数字，布尔，数组，对象。

需要注意的是在传递数据时，即便数据是静态的我们仍然需要使用v-bind，来告诉vue这是一个数字/布尔/数组/对象而非字符串：

//v-bind告诉vue这是一个数字而非字符串
<module-title Mtitle="热游推荐" :tagType="1"></module-title>

传递布尔时：prop没有值意味着值为true。若值为false，即便false是一个静态值，我们仍然需要使用v-bind来告诉vue这是一个布尔值而非字符串。

//is-published没有值意味着值实际上为true
<blog-post is-published></blog-post>
//使用v-bind告诉vue这是一个布尔值false，v-bind可简写为:
<blog-post v-bind:is-published="false"></blog-post>

传递数组：

<btn :nubArr="[11,22,33]"></btn>

传递对象：

<btn :obj="{name；'按钮',type:1}"></btn>

2：prop验证：

我们可以在子组件内对父组件传递过来的值进行验证，以及设置默认值，设置是否必传。若传递过来的值与子组件预期的值类型不一致则会报错。

type：规定数据类型，default：设置数据默认值，required：规定是否必须。

例如：

		props:{
			// title
			Mtitle:{
                //规定数据类型
				type:String,
                //规定是否必传
				required: true
			},
			// 标签类型，0没有，1为hot，2为new，3为礼包
			tagType:{
				type:Number,
                //设置默认值
				default:0
			},
			// 是否有右侧按钮，0没有,1有
			more:{
				type:Number,
				default:1
			},
        }

vue还提供自定义验证函数：

props:{
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
}

3：单向数据流：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

也就是说子组件是不可以改变父组件传递过来的值，那么如果我们需要对传递过来的值进行操作该怎么办？

有两种方法：1：在data中定义一个数据，将传递过来的值作为初始值，然后操作data定义的这个数据。

2：通过计算属性

组件传值：

1：父组件向子组件传值：

父组件可以向子组件传递静态或动态的值。子组件通过props来接收父组件传递过来的值。

--传递静态值：

父组件内使用自组件并传递静态值：Mtitle

<module-title Mtitle="热游推荐"></module-title>

在子组件内通过props来接收父组件传递的值： 

		props:{
			// title
			Mtitle:{
				type:String,
				required: true
			},
		},

使用父组件传递过来的值：

使用与data内值的使用方式一样，直接通过this.值名称即可获取使用。

--传递动态值：

<module-title Mtitle="热游推荐" :btnName="this.btnName"></module-title>

传递动态值需要使用v-bind 动态赋值。

2：子组件向父组件传值：

在vue中子组件是无法直接向父组件传值的，只能通过触发方法的形式通过this.$emit()传递值。在父组件中监听子组件事件来获取值。

子组件：

<template>
    <p>我是子组件</p>
    <div class="btn" @click="go">按钮</div>
</template>
<script>
    export default{
        name；"Btn",
        data(){
            return {
                name:"啦啦啦"
            }
        },
        methods:{
            //定义go方法
            go(){
                //通过this.$emit()向父组件发送消息
                //子组件发射自定义事件tigger 并携带要传递给父组件的值，
                // 如果要传递给父组件很多值，这些值要作为参数依次列出 如this.$emit('tigger', "哈哈哈",this.name); 
                this.emit("tigger","这是传递的数据")
            }
        }
    }
</script>

父组件内：

<template>
    <p>我是父组件</p>
    //使用子组件并监听
    <Btn @triggrt="eventGo()"></Btn>
</template>
<script>
    //引入子组件
    import Btn from ...
    export default{
        name；"Btn",
        components:{
            Btn
        },
        data(){
            return {}
        },
        methods:{
            //定义go方法
            eventGo(vulue){
                console.log(value)
                //打印哈哈哈
            }
        }
    }
</script>