Vue组件之详细理解并使用props和$emit()-蒲公英云

Vue组件之详细理解并使用props和$emit()

一、props的使用

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。
个人理解是：props是在子组件里面写的，其值为一个数组，即props:[keyName]。其中的keyName是要传递的参数，但它是如何绑定到父组件的数据呢？在父组件里面用到子组件的时候，就在父组件文件中的子组件标签里面进行绑定keyName,然后keyName的值就是要绑定的父组件的数据。子组件里面要用到父组件数据时就直接用keyName就行。
实例如下：

下面画蓝线的就表示是props里面的属性参数名，画红线的就是父组件的数据。可以清晰的看到父组件的数据firstName只在父组件里面出现，在父组件里面传递给parentData,然后子组件里面就只需用到parentData就行了，就不用出现firstName。因为parentData代表的就是firstName
在这里插入图片描述

效果图如下：用了v-model动态的改变firstName的值然后传递到子组件中

仔细看可以发现上面是动态的改变子组件里面的props的值parentData,其实这样是报错的，因为不允许动态改变props的值。下面优化了一下，是动态的改变父组件里面的数据firstName，然后传递到子组件，子组件也就是动态变化的。如下：
在这里插入图片描述
优化后效果如下：

二、$emit()的使用

因为vue更推荐单向数据流，所以子组件向父组件传递数据就需要通过$emit()再通过里传递的事件来传递数据。子组件可以通过 $emit()触发父组件中的自定义事件。

个人理解：vm.$emit(eventName,dataName)，其中eventName是一个字符串，名字自起，dataName可以是data对象里面的数据名或者可以直接是数据字符串。
下面的例子中eventName我取得是clickEvent.dataName是data里面的firstName。然后在子组件里面的 < template></ template>里面的标签元素中进行事件绑定。
即v-on:eventName = clickEvent(其中eventName可以是click、mousedown之类)再然后在父组件的< template>< /template>里面的标签元素上通过子组件的clickEvent进行绑定父元素里面的自定义事件，即v-on:clickEvent = ‘parentEventName’。
代码如下：
在这里插入图片描述

效果图如下：点击按钮就会触发父组件里面的自定义事件，同时将数据传送给父组件

vue基础知识点:
一、vue安装&实例创建&挂载点&模板
二、指令详细使用及其区别&实例属性
三、组件与组件的拆分
四、Vue组件之 d i s p a t c h 和 dispatch和 dispatch和broadcast
五、vue组件之祖孙传后代provide和inject
六、Vue组件之详细理解并使用props和$emit()