ref屬性

????????在 Vue2 中，ref是一個(gè)特殊的屬性，用于在模板中獲取對某個(gè) DOM 元素或子組件的引用。通過 ref，我們可以在 JavaScript 代碼中直接訪問該 DOM 元素或組件實(shí)例。

示例:

<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 元素，比如設(shè)置焦點(diǎn)、獲取元素的值等。
• 調(diào)用子組件方法：通過 ref 可以訪問子組件的實(shí)例，進(jìn)而調(diào)用其方法或訪問其數(shù)據(jù)。

props配置?

????????在 Vue 2 中，props?是父組件向子組件傳遞數(shù)據(jù)的一種機(jī)制。通過props?父組件可以將其數(shù)據(jù)傳遞給子組件，而子組件則可以使用這些數(shù)據(jù)來渲染其內(nèi)容或執(zhí)行某些操作。

示例：

父組件中，

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

?子組件中，

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

注意：在 Vue 中，props是單向綁定的：父組件傳遞數(shù)據(jù)給子組件，子組件不應(yīng)該直接修改props。如果子組件需要基于props的值來改變某些數(shù)據(jù)，應(yīng)該使用計(jì)算屬性或本地?cái)?shù)據(jù)屬性。

mixin(混入)

????????混入允許你將可復(fù)用的功能代碼提取到一個(gè)對象中，然后在多個(gè)組件中使用。這可以幫助你避免重復(fù)代碼并保持組件的整潔。

示例

首先先創(chuàng)建定義混入的js文件

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

?使用

<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>

?注意：

• 命名沖突：如果混合和組件中有同名的屬性，組件中的屬性會(huì)覆蓋混合中的屬性。
• 生命周期鉤子：混合中的生命周期鉤子會(huì)在組件中被調(diào)用，但它們的執(zhí)行順序是：父級鉤子（例如組件自身的 created）在混合鉤子之前。
• 多重混合：你可以在一個(gè)組件中使用多個(gè)混合。