Vue基础（5） - 技术栈

ref属性

在 Vue2 中，ref是一个特殊的属性，用于在模板中获取对某个 DOM 元素或子组件的引用。通过 ref，我们可以在 JavaScript 代码中直接访问该 DOM 元素或组件实例。

示例:

html 复制代码

<template>
  <div>
    <input ref="inputField" placeholder="Type something here" />
    <button @click="focusInput">Focus Input</button>
    
    <child-component ref="childComponent"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    focusInput() {
      this.$refs.inputField.focus();
    },
    callChildMethod() {
      this.$refs.childComponent.someMethod();
    }
  }
};
</script>

作用：

操作 DOM 元素 ：通过 ref 可以直接操作 DOM 元素，比如设置焦点、获取元素的值等。
调用子组件方法 ：通过 ref 可以访问子组件的实例，进而调用其方法或访问其数据。

props配置

在 Vue 2 中，props 是父组件向子组件传递数据的一种机制。通过props 父组件可以将其数据传递给子组件，而子组件则可以使用这些数据来渲染其内容或执行某些操作。

示例：

父组件中，

html 复制代码

<!-- 父组件 -->  
<template>  
  <div>  
    <child-component message="Hello from Parent"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

子组件中，

html 复制代码

<!-- 子组件 (ChildComponent.vue) -->  
<template>  
  <div>{{ message }}</div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

注意：在 Vue 中，props是单向绑定的：父组件传递数据给子组件，子组件不应该直接修改props。如果子组件需要基于props的值来改变某些数据，应该使用计算属性或本地数据属性。

mixin(混入)

混入允许你将可复用的功能代码提取到一个对象中，然后在多个组件中使用。这可以帮助你避免重复代码并保持组件的整洁。

示例

首先先创建定义混入的js文件

javascript 复制代码

// myMixin.js
export const myMixin = {
  data() {
    return {
      mixinData: 'Hello from mixin!'
    };
  },
  created() {
    console.log('Mixin created!');
  },
  methods: {
    greet() {
      console.log(this.mixinData);
    }
  }
};

使用

javascript 复制代码

<template>
  <div>
    <h1>{{ mixinData }}</h1>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
  mixins: [myMixin],
  data() {
    return {
      componentData: 'Hello from component!'
    };
  },
  created() {
    console.log('Component created!');
  }
};
</script>

注意：

命名冲突：如果混合和组件中有同名的属性，组件中的属性会覆盖混合中的属性。
生命周期钩子 ：混合中的生命周期钩子会在组件中被调用，但它们的执行顺序是：父级钩子（例如组件自身的 created）在混合钩子之前。
多重混合：你可以在一个组件中使用多个混合。