当前位置：首页 > news >正文

Vue基础（5）

news 2025/9/14 23:06:45

ref属性

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

示例:

<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 父组件可以将其数据传递给子组件，而子组件则可以使用这些数据来渲染其内容或执行某些操作。

示例：

父组件中，

<!-- 父组件 -->  
<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是单向绑定的：父组件传递数据给子组件，子组件不应该直接修改props。如果子组件需要基于props的值来改变某些数据，应该使用计算属性或本地数据属性。

mixin(混入)

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

示例

首先先创建定义混入的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>

注意：