vue 组件使用中的一些细节点

下面我来详细讲解一下vue组件使用中的一些细节点。

组件标签名的命名

在Vue中使用组件需要先在Vue实例中注册该组件，命名时需要注意以下几点：

• 组件标签名建议使用连字符形式如 <my-component></my-component>，而不是驼峰式形式如 <MyComponent></MyComponent>。
• 组件标签名不能使用HTML和SVG原有的元素标签名，如<div>、<p>、<svg>等，否则会被视为普通HTML或SVG元素且无法在父组件中直接引用子组件。

父子组件通信

在Vue组件开发中，父组件和子组件是通过props和emit这两套API来实现通信的。

props

props用于接收父组件传递下来的数据。父组件可以在子组件标签上通过属性的形式传递数据，子组件内部可以通过在props中定义，来接收这些数据。下面是一个示例：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ desc }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    desc: {
      type: String,
      default: ''
    }
  }
}
</script>

在这个例子中，我们定义了一个MyComponent组件，它有两个props：title和desc。其中title为必填项，类型为String，而desc的类型为String，默认值为空字符串。

在父组件中，我们可以这样来使用MyComponent组件：

<template>
  <div>
    <my-component title="Hello Vue" desc="Vue is awesome!"></my-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',

  components: {
    MyComponent
  }
}
</script>

在这个例子中，我们在父组件中使用MyComponent组件，并传递了两个props：title和desc。

emit

emit用于在子组件中触发自定义事件。子组件可以通过在methods中定义一个方法来触发事件，父组件可以通过在子组件标签上监听这个事件并执行相应的方法。下面是一个示例：

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',

  methods: {
    handleClick() {
      this.$emit('btn-click', 'button clicked')
    }
  }
}
</script>

在这个例子中，我们定义了一个MyComponent组件，并在其中定义了一个handleClick方法来触发事件。在这个方法中，我们使用了this.$emit('btn-click', 'button clicked')的方式来触发了一个名为btn-click的自定义事件，同时传递了一个参数'button clicked'。

在父组件中，我们可以这样监听这个事件：

<template>
  <div>
    <my-component @btn-click="handleBtnClick"></my-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',

  components: {
    MyComponent
  },

  methods: {
    handleBtnClick(evt) {
      console.log(evt) // 'button clicked'
    }
  }
}
</script>

在这个例子中，我们在父组件中使用了MyComponent组件，并在子组件标签上监听了一个btn-click事件，并在handleBtnClick方法中输出了接收到的参数。