VUE重点问题总结攻略

1. Vue组件之间通信方式

在Vue组件开发中，组件之间通信是一个重要的问题。Vue提供了多种组件之间通信的方式，包括props、$parent/$children、$emit/$on、$refs等，下面分别进行详细说明。

Props

使用props向子组件传递数据是最常用的方式。父组件通过props向子组件传递数据，子组件通过props接受父组件传递过来的数据。

示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component message="Hello"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

$emit/$on

使用$emit/$on实现父组件向子组件传递事件，子组件触发该事件，再把数据通过$emit传递给父组件。

示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(data) {
      console.log(data)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div @click="handleClick">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    handleClick() {
      this.$emit('custom-event', this.message)
    }
  }
}
</script>

$refs

$refs可以获取子组件实例，通过获取子组件实例可以实现方法调用和数据访问。

示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent }
  mounted() {
    this.$refs.child.method()
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    method() {
      console.log('子组件方法调用')
    }
  }
}
</script>

2. Vue中使用自定义指令

Vue提供了自定义指令的功能，可以通过自定义指令来扩展Vue的功能。

注册全局指令

注册全局指令可以在应用的任意位置使用自定义指令。

示例：

Vue.directive('custom-directive', {
  bind(el, binding) {
    console.log('自定义指令调用')
    console.log(binding.value)
  }
})

注册局部指令

注册局部指令可以使得指令只在当前组件中使用。

示例：

// 局部指令定义
const myDirective = {
  inserted(el, binding) {
    console.log('自定义指令调用')
    console.log(binding.value)
  }
}

// 在组件中注册局部指令
export default {
  directives: {
    myDirective
  }
}