Vue.js每天必学之组件与组件间的通信

在Vue.js中，组件是一个重要的概念。组件可以方便地构建复杂的应用程序，并且可以通过组件之间的通信来实现数据的共享与交互。本文将对Vue.js中组件与组件间的通信进行详细的讲解，并给出两个示例说明。

组件

在Vue.js中，组件是一个独立的模块化单元，有自己的模板、数据和方法。组件可以嵌套，可以被重复使用，并且可以方便地传递数据和事件。

组件可以通过Vue.component方法来注册，也可以通过单文件组件（.vue文件）的方式来定义。

下面是一个简单的组件示例：

<template>
    <div>
        <h1>{{title}}</h1>
        <p>{{content}}</p>
    </div>
</template>

<script>
export default {
    props: ['title', 'content']
}
</script>

上面的代码定义了一个名为MyComponent的组件，该组件有两个属性title和content，可以在组件中通过props属性定义。

父子组件通信

在Vue.js中，父子组件通信是最常见的一种组件通信方式。父组件通过props属性向子组件传递数据，子组件通过$emit方法向父组件触发事件。

下面是一个父子组件通信的示例：

<template>
    <div>
        <h1>{{title}}</h1>
        <my-child-component :content="content" @click="handleClick"></my-child-component>
    </div>
</template>

<script>
import MyChildComponent from './MyChildComponent.vue'

export default {
    data() {
        return {
            title: '父组件',
            content: '这是父组件传递给子组件的内容'
        }
    },
    methods: {
        handleClick() {
            console.log('父组件被点击了')
        }
    },
    components: {
        MyChildComponent
    }
}
</script>

在上面的代码中，通过props属性向子组件MyChildComponent传递了属性content，通过@click监听子组件的点击事件，并在父组件中定义了handleClick方法。

下面是子组件MyChildComponent的代码：

<template>
    <div class="child-component" @click="$emit('click')">
        <p>{{content}}</p>
    </div>
</template>

<script>
export default {
    props: ['content']
}
</script>

在子组件中，通过props接收父组件传递的属性content，通过$emit方法触发click事件。

非父子组件通信

在Vue.js中，非父子组件通信可以通过$emit和$on方法进行。$emit方法用于触发一个事件，$on方法用于监听一个事件。

下面是一个非父子组件通信的示例：

<!-- ComponentA.vue -->
<template>
    <div @click="handleClick">组件A</div>
</template>

<script>
export default {
    methods: {
        handleClick() {
            this.$root.$emit('event-from-a', 'This is event data from ComponentA')
        }
    }
}
</script>

<!-- ComponentB.vue -->
<template>
    <div>组件B</div>
</template>

<script>
export default {
    data() {
        return {
            message: ''
        }
    },
    created() {
        this.$root.$on('event-from-a', (data) => {
            this.message = data
        })
    }
}
</script>

在上面的代码中，组件A通过$root.$emit方法触发了一个自定义事件event-from-a，同时传递了一个字符串类型的事件数据。在组件B中，通过$root.$on方法监听到了event-from-a事件，并将事件数据赋值给message属性。

以上是Vue.js每天必学之组件与组件间的通信的完整攻略及示例。