Vue中的 ref,props,mixin属性

下面是对Vue中ref、props、mixin属性的详细讲解攻略：

1. ref属性

1.1 简介

ref 属性是 vue 框架的一个特定属性，它可以让我们在 vue 组件中获得特定的 dom 节点或组件实例。如果我们在组件的模板中使用 ref，例如 ref="myRef"，那么在 vue 实例中就可以以 this.$refs.myRef 的形式访问到该元素或组件。

1.2 示例

例如，我们想要在 vue 组件中使用一个 vue-native-websocket 组件，但是我们需要获得它的实例，以便在组件中进行 websocket 操作，则可以使用 ref 指向该组件实例：

<template>
  <vue-native-websocket ref="socket" :url="url" @open="onOpen" @message="onMessage"></vue-native-websocket>
</template>

<script>
import VueNativeSock from 'vue-native-websocket'

export default {
  data() {
    return {
      url: 'ws://localhost:3000',
    }
  },
  mounted() {
    this.$refs.socket.websocket.send('hello')
  },
  methods: {
    onOpen(event) {
      console.log('WebSocket connected:', event);
    },
    onMessage(event) {
      console.log('WebSocket message received:', event);
    },
  },
  components: {
    VueNativeSock
  },
}
</script>

2. props属性

2.1 简介

props 属性是 vue 组件之间通讯的重要手段，通过 props 属性，可以将数据在不同的组件之间进行传递。父组件可以通过 props 向子组件传递数据，子组件可以通过父组件传递的 props 获得数据。

2.2 示例

例如，我们想要实现一个简单的提示框组件，可以通过 props 传递标题和内容：

<template>
  <div class="alert">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    content: {
      type: String,
      default: ''
    }
  }
}
</script>

然后，在父组件中以如下方式使用该组件：

<template>
  <div>
    <Alert title="错误提示" content="用户名或密码错误"></Alert>
  </div>
</template>

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

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

3. mixin属性

3.1 简介

mixin 属性可以让我们在多个组件之间共享代码。它类似于一个扩展功能，可以将多个组件中重复的逻辑抽离出来，放到一个独立的 mixin 中，然后在多个组件中引入该 mixin。

3.2 示例

例如，我们在多个组件中需要使用 uuid 库来生成唯一的 id，我们可以将 uuid 库集成到 mixin 中，这样多个组件就可以共享 uuid 代码了：

// uuid mixin
import uuid from 'uuid'

export default {
  methods: {
    generateUuid() {
      return uuid.v4()
    }
  }
}

然后，在多个组件中引入该 mixin：

<template>
  <div>
    <button :id="generateUuid()">按钮</button>
  </div>
</template>

<script>
import uuidMixin from './uuidMixin'

export default {
  mixins: [uuidMixin],
}
</script>

这样，每个按钮的 id 都是唯一的了。