vue2 组件的使用

基本使用

写组件👇

 

1️⃣在上述代码中，name: 'MyHeader' 是 Vue 组件选项中的一个属性。它用于指定组件的名称。

在 Vue2 中，每个组件都需要一个唯一的名称，以便在其他组件或者 Vue 实例中引用该组件。通过 name 属性，我们可以给组件命名，使其在整个应用程序中具有一个标识符。

在这个例子中，组件的名称被定义为 'MyHeader'，这意味着我们可以在其他地方使用 <my-header></my-header> 的形式来引用这个组件。

当然，你也可以自定义组件名

2️⃣在 Vue 单文件组件中，<style scoped> 标签用于给当前组件的样式添加作用域。这意味着在使用了 scoped 属性的 <style> 标签内编写的样式只会作用于当前组件，不会影响到其他组件。

例如，如果你在一个 Vue 单文件组件中使用了 <style scoped>，那么其中定义的样式规则只会应用于该组件内部的元素，而不会泄露到其他组件中去。

这种作用域样式的特性能够帮助我们更好地管理组件之间的样式隔离，避免全局样式污染和样式冲突问题。

调用组件👇

1️⃣我们首先使用 import 语句导入了两个组件（图中只画了一个）：MyHeader 和 MyAside。这里的 @ 符号是一个别名，通常用来表示项目根目录。因此，@/components/MyHeader.vue 表示项目根目录下的 components/MyHeader.vue 文件。

2️⃣通过 components 属性将导入的组件注册为当前组件的子组件。我们可以在模板中使用 <MyHeader></MyHeader> 和 <MyAside></MyAside> 来引用这两个组件。

组件之间的通信

父组件向子组件通信

在 Vue.js 中，父组件可以通过向子组件传递属性（props）的方式来实现和子组件的通信。子组件可以通过 props 属性来接收父组件传递过来的数据，然后在自身组件中使用这些数据。

下面是一个简单的示例：

父组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    }
  }
}
</script>

在这个示例中，我们定义了一个名为 ParentComponent 的组件。该组件包含一个子组件 ChildComponent，并且通过 :message="parentMessage" 的方式向子组件传递了一个名为 parentMessage 的属性。

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

在子组件中，我们通过 props 属性声明了一个名为 message 的属性，并指定了它的类型为 String。然后，在子组件的模板中，我们通过 {{ message }} 的方式使用了这个属性。

由于父组件向子组件传递了 parentMessage 这个属性，因此在子组件中可以通过 props 属性接收到这个属性并使用它。

子组件向父组件通信

在 Vue.js 中，子组件可以通过 $emit 方法向父组件发送事件，从而和父组件通信。父组件可以通过 v-on 指令（或简写的 @）来监听这些事件，并在回调函数中处理事件传递过来的数据。

下面是一个简单的示例：

子组件：

<template>
  <div>
    <button @click="handleClick">Send message to parent</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    handleClick() {
      this.$emit('message', 'Hello from child component')
    }
  }
}
</script>

在这个示例中，我们定义了一个名为 ChildComponent 的组件。该组件包含一个按钮，当用户点击按钮时，会触发 handleClick 方法。在 handleClick 方法中，我们调用了 $emit 方法，并传递了两个参数：第一个参数是事件名称 'message'，第二个参数是要传递给父组件的数据 'Hello from child component'。

父组件：

<template>
  <div>
    <child-component v-on:message="handleMessage"></child-component>
    <p>Received message: {{ parentMessage }}</p>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.parentMessage = message
    }
  }
}
</script>

在父组件中，我们使用 v-on:message="handleMessage" 的方式监听了子组件发出的 message 事件，并在回调函数 handleMessage 中处理了事件传递过来的数据。在这个示例中，我们简单地将事件传递过来的数据赋值给了 parentMessage，然后在模板中显示了这个数据。

由于子组件通过 $emit 方法发送了 message 事件，并传递了 'Hello from child component' 这个数据，因此在父组件中可以通过 v-on:message 监听到这个事件，并在回调函数中处理数据。

进阶

 element和Vant 是两个典型的提供了很多内置组件的UI框架。