vue父子组件间如何传值

1. 父组件传递方法

首先，在Vue中父组件向子组件传递方法的方式很多，我们先来看一个最简单的例子。

首先，我们在父组件中定义一个方法：

methods: {
    hello(){
        console.log('hello');
    }
}

接下来，我们需要将这个方法传递给子组件。在Vue中，父组件可以通过props向子组件传递数据以及方法。

在父组件中，我们需要通过以下方式来完成传递方法：

在子组件中，我们需要通过props来接收父组件传递过来的方法：

props: {
    hello: Function
}

接着，我们需要在子组件中调用方法：

Click me

这样，我们就能够在子组件中成功调用父组件传递的方法了。

2. 子组件向父组件传递方法

接下来，我们介绍子组件向父组件传递方法的方式。跟父组件向子组件传递方法的方式相比，这种方式就要复杂一些。

首先，在子组件中我们定义一个方法：

methods: {
    send(){
        this.$emit('demo-event');
    }
}

在这里，我们定义了一个send方法，该方法通过$emit触发了一个名为“demo-event”的事件。需要注意的是，在Vue中我们传递方法时不直接传递函数本身，而是通过事件的方式来传递。

接下来，我们需要在父组件中监听该事件，具体代码如下：

在这里，我们通过@demo-event来监听子组件触发的“demo-event”事件，并在父组件中定义了一个事件处理函数handleDemo。

接着，我们需要在父组件中定义handleDemo方法：

methods: {
    handleDemo(){
        console.log('demo event received');
    }
}

这样，在子组件中触发send方法时，就会触发“demo-event”事件，并进而执行handleDemo方法。