飞利浦·斯塔克|Vue子组件向父组件传参(事件传参)

文章图片

1. 自定义事件除了可以处理原生的DOM事件 v-on指令也可以处理组件内部触发的自定义的事件调用this.$emit()函数就可以触发一个自定义事件

$emit()触发事件函数接受一个自定义事件的事件名以及其他任何给事件函数传递的参数. 然后就可以在组件上使用v-on来绑定这个自定义事件
{
methods: {
handleClick(){
this.clicks++
this.$emit(\"count\"this.clicks )

所以我们就可以利用自定事件来处理子组件触发父组件数据的更改和向父组件传值
2. 子组件触发父组件数据的改变通过父组件向子组件传值的学习我们已经知道了Vue是单向下行数据流子组件更改props中的数据不会触发父组件数据的改变但是由于响应式原理父组件数据的改变会导致子组件props中值的改变
那么我们怎样才能在子组件中改变显示的结果呢.

思路:
子组件中没发更改父组件中的数据那么我们就让父组件自己的函数改自己的数据
如何在子组件中触发父组件中的函数呢就可以通过自定义事件
子组件在函数中触发自定义事件将父组件中更改数据的函数绑定为自定义事件的函数
然后父组件中的数据一变因为响应式所以子组件中的数据会自动改变

示例代码如下:
<div id=\"app\">


<my-component
:clicks=\"clicks\"
@count=\"handleParentClick\"
></my-component>
</div><template id=\"MyComponent\">
<div>
被点击了{{clicks次 
<button @click=\"handleClick\">点击</button>
</div></template><script>

// 组件选项对象
let MyComponent = {
props:[\"clicks\"

template: `#MyComponent`
methods:{
handleClick(){
// 2.子子组件函数中触发自定义事件
this.$emit(\"count\")

// 实例中注册组件
const vm = new Vue({
el:\"#app\"
data: {
clicks:0

components: {
\"MyComponent\": MyComponent
methods:{
handleParentClick(){
// 4. 在父组件函数中修改父组件中的数据
this.clicks++