前端Vue日常工作中--Vue实例属性

前端Vue日常工作中–Vue实例属性

在 Vue.js 中，实例属性（Instance Properties）是指绑定在 Vue 实例上的属性。这些属性通常用于存储组件的状态、数据和配置选项。这些实例属性提供了一种在组件内部访问和操作相关数据的方式。这些属性可以在组件的生命周期钩子、方法和模板中使用。

1. $data: 用于访问组件的数据对象。可以直接访问或修改组件的数据。

console.log(this.$data); // 访问组件数据

$data属性是Vue实例的一个引用，指向实例的数据对象。这个数据对象包含了Vue实例中所有响应式的数据。当你在模板中声明数据时，实际上这些数据就会被添加到这个数据对象中。

实际使用：

<el-input>和<el-button>，并且你想在按钮点击时修改message和count。

<template>
  <div id="app">
    <el-input v-model="message"></el-input>
    <el-button @click="increment">Increment Count</el-button>
    <p>Message: {{ message }}</p>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style>

</style>

<el-input>通过v-model绑定到message，而按钮通过@click监听点击事件，并调用increment方法。在<p>标签中，分别显示了message和count的值。

通过$data属性，可以在方法中访问和修改数据：

methods: {
  increment() {
    this.$data.message = 'New Message';
    this.$data.count++;
  }
}

这样，当点击按钮时，message会被设置为’New Message’，count会递增。

2. $props: 用于访问组件的props。包含了父组件传递给当前组件的所有props。

console.log(this.$props); // 访问组件的props

$props属性是Vue组件实例的一个引用，它包含了当前组件接收到的所有 props。这些 props 是从父组件传递给子组件的，用于在子组件中使用外部数据。

实际使用：

一个包含<el-input>和<el-button>的父组件中，通过 props 将一些配置传递给子组件，然后子组件通过$props访问这些配置。使用$props属性在Vue组件中访问从父组件传递的 props 数据。

<!-- ParentComponent.vue --> 父组件
<template>
  <div>
    <my-form :config="formConfig" />
  </div>
</template>

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

export default {
  components: {
    MyForm
  },
  data() {
    return {
      formConfig: {
        label: 'Username',
        placeholder: 'Enter your username'
      }
    };
  }
};
</script>

<!-- MyForm.vue --> 子组件
<template>
  <div>
    <el-input
      v-model="value"
      :placeholder="$props.config.placeholder"
    ></el-input>
    <el-button @click="submitForm">Submit</el-button>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      value: ''
    };
  },
  methods: {
    submitForm() {
      // props和data
      console.log('Input value:', this.value);
      console.log('Config label:', this.$props.config.label);
    }
  }
};
</script>

ParentComponent通过 props 向MyForm组件传递了一个formConfig对象。在MyForm组件中，通过$props.config访问了这个配置对象，并在<el-input>的placeholder属性中使用了$props.config.placeholder。

3. $el: 用于访问当前组件的根 DOM 元素。

console.log(this.$el); // 访问当前组件的根元素

$el属性是Vue实例的一个引用，它指向实例所管理的根 DOM 元素。这个元素是Vue实例挂载的目标，也就是通过el选项指定的元素或通过$mount方法手动挂载的元素。

实际使用：

<el-input>和<el-button>，并且你想在按钮点击时修改$el元素的样式。使用$el属性来访问实例所管理的根DOM元素。在实际应用中，最好遵循Vue的响应式数据驱动视图的原则。

<template>
  <div id="app">
    <el-input v-model="message"></el-input>
    <el-button @click="updateMessage">Update Message</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage() {
      // 修改 $el 元素的样式
      this.$el.style.backgroundColor = 'lightblue';
    }
  }
};
</script>

<style>

</style>

点击按钮时，updateMessage方法会被调用，然后通过this.$el访问到根元素（#app），并修改了其背景颜色。

注意，直接操作$el并不是Vue的推荐做法，因为它绕过了Vue的响应式系统。通常情况下，应该通过修改Vue实例的数据来触发视图的更新，而不是直接操纵DOM元素。

4. $options: 包含当前 Vue 实例的初始化选项。通常在创建实例时传递的选项对象。

console.log(this.$options); // 访问实例的初始化选项

$options属性是一个对象，包含了Vue实例的初始化选项。这些选项包括组件选项（如果实例是一个组件）、数据、计算属性、方法、生命周期钩子等。通过$options，你可以在运行时访问实例的初始配置。

实际使用：

实际项目中使用$options的场景相对较少，结合ElementUI如何在created生命周期钩子中访问$options。

<template>
  <div id="app">
    <el-input v-model="message"></el-input>
    <el-button @click="updateMessage">Update Message</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  created() {
    // 访问 $options 中的 methods 选项
    const methodsOptions = this.$options.methods;
    console.log('$optionsmethods 选项:', methodsOptions);

    // 通过 $options 访问到创建实例时传入的所有选项
    console.log(' $options所有选项:', this.$options);
  },
  methods: {
    updateMessage() {
      this.message = 'Updated Message';
    }
  }
};
</script>

<style>

</style>

created生命周期钩子中通过this.$options.methods访问了实例初始化时传入的methods选项，并在控制台中输出。同时，通过this.$options访问了创建实例时传入的所有选项，包括el、data等。

注意，通常情况下，我们更倾向于直接在实例中定义方法和数据，而不是通过$options去获取。使用$options主要是为了了解实例的初始化配置，而不是在实际应用中频繁使用。

5. $parent: 用于访问当前组件的父组件实例。

console.log(this.$parent); // 访问父组件实例

$parent属性是Vue实例的一个引用，指向当前实例的父实例。这使得你可以在子组件中访问父组件的数据和方法。在一些场景下，可能需要从子组件访问父组件的一些状态或方法，而$parent就提供了这样的能力。

实际使用：

假设有一个父组件和一个子组件，父组件包含一个<el-input>，而子组件想要获取父组件输入框的值。

<!-- ParentComponent.vue -->父组件
<template>
  <div>
    <el-input v-model="inputValue"></el-input>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

<!-- ChildComponent.vue -->子组件
<template>
  <div>
    <p>Value from parent: {{ $parent.inputValue }}</p>
  </div>
</template>

<script>
export default {
  // 子组件中通过 $parent 访问父组件的数据
};
</script>

子组件通过$parent访问了父组件的inputValue数据。请注意，虽然$parent可以解决一些简单的通信问题，但在大型应用中，更推荐使用props和自定义事件等更明确的通信方式，以避免组件之间的紧密耦合。

6. $root: 用于访问当前组件所属的根 Vue 实例。

console.log(this.$root); // 访问根 Vue 实例

$root属性是Vue实例的一个引用，指向Vue应用的根实例。根实例是Vue应用的最顶层实例，包含了整个应用的数据和方法。通过$root，你可以在任何组件中访问根实例的数据和方法。

实际使用：

假设在Vue应用的某个组件中想要访问根实例的数据和方法。

<!-- ChildComponent.vue -->子组件
<template>
  <div>
    <p>Value from root: {{ $root.rootMessage }}</p>
    <button @click="$root.rootMethod">Call Root Method</button>
  </div>
</template>

<script>
export default {
  // 子组件中通过 $root 访问根实例的数据和方法
};
</script>

子组件通过$root访问了根实例的rootMessage数据和rootMethod方法。这使得子组件可以与根实例进行通信。

注意，虽然$root可以解决一些通信问题，但在实际应用中，更推荐使用props、自定义事件等更明确的通信方式，以避免组件之间的紧密耦合。直接依赖$root可能使得组件不够独立和可复用。

7. $children :访问当前实例的所有直接子组件实例

$children 并不保证顺序，也不是响应式的。

console.log(this.$children);// 访问当前实例的所有直接子组件实例

$children 是 Vue.js 实例的一个属性，用于访问当前实例的直接子组件的实例数组。这个属性提供了一种在父组件中直接访问子组件实例的方式，可以用于操作子组件的数据、方法等。

实际使用：

1. 获取子组件实例数组：

   // 访问当前实例的所有直接子组件实例
   const childComponents = this.$children;
   

2. 注意顺序不确定性：

   $children 数组的顺序并不一定与组件在模板中的顺序一致。Vue.js 并不保证 $children 的顺序与模板中的顺序相同，因此最好使用 ref 属性来获取具体的子组件。

3. 访问子组件的数据和方法：

   // 访问第一个子组件实例
   const firstChild = this.$children[0];
   
   // 访问子组件的数据
   const childData = firstChild.someData;
   
   // 调用子组件的方法
   firstChild.someMethod();
   

4. 慎用$children：

   尽管 $children 提供了一种在父组件中直接访问子组件实例的方式，但在实际应用中，更推荐通过 ref 来获取子组件引用，以确保代码的稳定性和可读性。

   <template>
     <child-component ref="myChild"></child-component>
   </template>
   
   <script>
   export default {
     methods: {
       accessChildComponent() {
         const childComponent = this.$refs.myChild;
         // 使用 $refs 获取子组件实例
       }
     }
   }
   </script>
   

$children 是一个方便的属性，但在使用时需要小心处理顺序不确定性，并且在可能的情况下，推荐使用 ref 来更直观地获取子组件的引用。

8. $slots: 包含了当前组件插槽的内容。用于访问和操作插槽内容。

console.log(this.$slots); // 访问插槽内容

$slots属性是一个对象，包含了当前组件中插槽的信息。插槽是一种允许父组件向子组件传递内容的机制，通过<slot>标签定义插槽，父组件可以在使用子组件时插入内容。$slots允许你在组件内部访问这些插槽的内容。

实际使用：

假设我们有一个父组件包含了一个自定义的按钮组件，并在按钮组件的插槽中插入了一些内容。

<!-- ParentComponent.vue -->父组件
<template>
  <div>
    <my-button>
      <span>Click me</span>
    </my-button>
  </div>
</template>

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

export default {
  components: {
    MyButton
  }
};
</script>


<!-- MyButton.vue -->
<template>
  <button>
    <slot></slot>
  </button>
</template>

ParentComponent包含了一个MyButton组件，并在MyButton组件的插槽中插入了一个<span>元素。MyButton组件中的<slot></slot>将显示父组件插入的内容。

现在，可以在MyButton组件内部通过$slots来访问插槽的内容，并进行处理。例如，在MyButton组件中显示插槽内容前添加一些文字：

<!-- MyButton.vue -->
<template>
  <button>
    <p>Custom Text:</p>
    <slot></slot>
  </button>
</template>

<script>
export default {
  mounted() {
    // 访问 $slots 默认插槽
    const slotContent = this.$slots.default;
    console.log('Slot Content:', slotContent);
  }
};
</script>

在mounted生命周期钩子中通过this.$slots.default访问了插槽的内容，并在按钮组件中显示了一些自定义文字。这展示了如何使用$slots在子组件中访问和处理插槽的内容。

9. $scopedSlots: 包含了作用域插槽的内容。用于访问和操作作用域插槽的内容。

console.log(this.$scopedSlots); // 访问作用域插槽内容

$scopedSlots属性是一个对象，包含了当前组件中具名插槽的信息。具名插槽允许父组件在插入内容时传递数据给子组件，并在子组件中使用这些数据。$scopedSlots允许你在子组件内部访问和处理具名插槽的内容。

实际使用：

假设我们有一个父组件包含了一个自定义的按钮组件，并在按钮组件的具名插槽中传递了一些数据。

<!-- ParentComponent.vue -->父组件
<template>
  <div>
    <my-button>
      <template v-slot:content="slotProps">
        <span>{{ slotProps.data }}</span>
      </template>
    </my-button>
  </div>
</template>

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

export default {
  components: {
    MyButton
  }
};
</script>

<!-- MyButton.vue -->
<template>
  <button>
    <p>Custom Text:</p>
    <slot name="content" :data="slotData"></slot>
  </button>
</template>

<script>
export default {
  data() {
    return {
      slotData: 'Data from Parent'
    };
  },
  mounted() {
    // 访问 $scopedSlots 具名插槽
    const scopedSlotContent = this.$scopedSlots.content;
    console.log('Scoped Slot Content:', scopedSlotContent({ data: this.slotData }));
  }
};
</script>

ParentComponent包含了一个MyButton组件，并在MyButton组件的具名插槽中传递了slotProps作为作用域插槽的数据。在MyButton组件中，通过this.$scopedSlots.content访问了具名插槽，并在mounted生命周期钩子中调用它，并传递了{ data: this.slotData }作为插槽的作用域。

这样，在子组件中使用了$scopedSlots来访问和处理具名插槽的内容。这种方式使得父组件和子组件之间能够更加灵活地传递和处理数据。

10. $refs: 用于访问子组件或 DOM 元素的引用。通常用于直接操作子组件或 DOM。

console.log(this.$refs.myComponent); // 访问子组件的引用

$refs属性是一个对象，包含了在模板中使用ref属性标记的子组件或DOM元素。通过$refs，你可以在Vue实例中访问这些子组件或DOM元素的属性和方法。

实际使用：

假设有一个包含<el-input>和<el-button>的父组件，并在模板中使用ref属性标记它们：

<!-- ParentComponent.vue -->父组件
<template>
  <div>
    <el-input ref="myInput" v-model="message"></el-input>
    <el-button @click="updateInput">Update Input</el-button>
  </div>
</template>

<script>
import { ElInput, ElButton } from 'element-ui';

export default {
  components: {
    ElInput,
    ElButton
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateInput() {
      // 通过 $refs 访问子组件或 DOM 元素
      this.$refs.myInput.focus();
    }
  }
};
</script>

通过ref属性标记了<el-input>，然后在updateInput方法中通过this.$refs.myInput访问了这个DOM元素，并调用了focus方法，使得输入框获得焦点。

需要注意的是，使用$refs直接访问子组件或DOM元素是一种相对底层的操作方式，通常建议在组件之间使用props和自定义事件等更清晰的通信方式。直接使用$refs可能会导致组件之间的耦合度增加，不够灵活。

11. $isServer: 一个布尔值，表示当前 Vue 实例是否运行于服务器端。在服务器端渲染时，该值为 true。

  if (this.$isServer) {
    // 在服务器端执行的代码
  }

$isServer是Vue实例的一个布尔属性，用于判断当前Vue实例是否运行在服务器端。在服务器端渲染(SSR)时，$isServer为 true，而在客户端渲染时，$isServer为 false。这个属性通常用于处理在不同环境下的一些特殊逻辑。

实际使用：

如果你有一些针对不同环境的特殊样式或行为，可以使用$isServer进行条件判断。

 <!-- MyComponent.vue -->
 <template>
   <div :class="{ 'server-only-style': $isServer }">
     <p v-if="$isServer">This content is only rendered on the server.</p>
     <p v-else>This content is rendered on the client.</p>
   </div>
 </template>
 
 <script>
 export default {
   created() {
     if (this.$isServer) {
       console.log('Running on the server');
     } else {
       console.log('Running on the client');
     }
   }
 };
 </script>
 
 <style scoped>
 .server-only-style {
   background-color: lightgray;
 }
 </style>

通过$isServer判断当前运行环境，然后在模板中根据条件渲染不同的内容或应用不同的样式。这是一个简单的例子，实际上，你可以根据需要执行更复杂的逻辑。

12. $attrs: 包含了父作用域中不被 prop 所识别（且获取的）的特性绑定（class 和 style 除外）。通常在包装组件时使用。

   console.log(this.$attrs); // 访问父组件传递的未被 prop 所识别的特性

$attrs 是 Vue 实例的一个对象，它包含了父组件传递给当前组件但当前组件没有声明为 prop 的所有属性。这对于高度可配置的组件非常有用，可以让子组件决定如何处理这些额外的特性。

实际使用：

假设我们有一个基于 ElementUI 的自定义按钮组件 MyButton，并且希望将所有父组件传递给按钮的额外特性应用到按钮上：

 <!-- MyButton.vue -->
 <template>
   <el-button v-bind="$attrs">
     <slot></slot>
   </el-button>
 </template>
 
 <script>
 import { ElButton } from 'element-ui';
 
 export default {
   inheritAttrs: false, // 防止将父组件的特性应用到根元素上
   components: {
     ElButton
   }
 };
 </script>

inheritAttrs: false 是必须的，它防止将 $attrs 应用到根元素上，而是手动通过 v-bind="$attrs" 将其传递给 el-button 组件。

这样，当在使用 MyButton 时，所有额外的特性都会被动态地传递给 el-button 组件，使得 MyButton 具有高度的可配置性。例如：

 <!-- 使用 MyButton 组件 -->
 <MyButton type="primary" icon="el-icon-search" size="small">Search</MyButton>

type、icon、size 等特性都会被动态地传递给 el-button 组件，使得按钮的样式和行为能够灵活配置。

13. $listeners: 包含了父组件传递给当前组件的所有非 prop 特性。用于访问和操作这些特性。

  console.log(this.$listeners); // 访问父组件传递的非 prop 特性

$listeners 是一个对象，包含了父组件传递给当前组件但当前组件没有声明为事件的所有监听器。在一些情况下，子组件可能需要传递某个事件到它的根元素，或者处理一些父组件没有明确定义的事件，这时 $listeners 就变得非常有用。

实际使用：

假设我们有一个基于 ElementUI 的自定义按钮组件 MyButton，并且希望在按钮上保留父组件传递的所有事件监听器：

 <!-- MyButton.vue -->
 <template>
   <el-button v-on="$listeners">
     <slot></slot>
   </el-button>
 </template>
 
 <script>
 import { ElButton } from 'element-ui';
 
 export default {
   inheritAttrs: false, // 防止将父组件的特性应用到根元素上
   components: {
     ElButton
   }
 };
 </script>

inheritAttrs: false 是必须的，它防止将 $listeners 应用到根元素上，而是手动通过 v-on="$listeners" 将其传递给 el-button 组件。

这样，当在使用 MyButton 时，所有父组件传递的事件监听器都会被动态地传递给 el-button 组件，使得 MyButton 具有高度的可配置性。例如：

 <!-- 使用 MyButton 组件 -->
 <MyButton @click="handleClick">Click me</MyButton>

click 事件监听器会被动态地传递给 el-button 组件，使得按钮能够响应点击事件，并执行 handleClick 方法。这样的设计使得 MyButton 可以灵活地处理所有父组件传递的事件。

14. $createElement: 一个方法，用于创建虚拟节点（VNode）。通常在渲染函数中使用，例如在 render 函数中手动创建 VNode。

 const vnode = this.$createElement('div', 'Hello, Vue!');

$createElement 是 Vue 实例的渲染函数中的一个参数，通常通过调用它来创建虚拟节点。它接受三个参数：

1. 标签名称或组件选项。
2. 一个包含了 VNode 数据的对象，可以设置元素的属性、事件监听器等。
3. 子节点，可以是文本节点、数组或其他 VNode。

实际使用：

使用 $createElement 在 ElementUI 中创建一个按钮：

 // MyButton.vue
 <template>
   <el-button v-bind="$attrs" v-on="$listeners">
     <slot></slot>
   </el-button>
 </template>
 
 <script>
 import { ElButton } from 'element-ui';
 
 export default {
   inheritAttrs: false,
   render(createElement) {
     // 使用 $createElement 创建按钮的 VNode
     return createElement(ElButton, {
       attrs: this.$attrs,
       on: this.$listeners
     }, this.$slots.default);
   }
 };
 </script>

在 render 函数中使用 $createElement 创建了一个 ElButton 组件的 VNode，并传递了 $attrs、$listeners 和插槽内容。

这样，当使用 MyButton 组件时，它会在内部动态地创建一个 ElementUI 的按钮，并保留了父组件传递的特性和事件监听器。这是在特定场景下使用 $createElement 的一种方式，通常在高级组件的开发中会用到。

15. $vnode: 当前组件的渲染 VNode。通常在渲染函数中使用。

  console.log(this.$vnode); // 访问当前组件的渲染 VNode

$vnode 是 Vue 实例的一个属性，用于访问当前组件的渲染 VNode。它通常在组件的生命周期钩子中使用，特别是在 beforeUpdate 和 updated 钩子中，可以用于对比前后两次渲染的 VNode。

实际使用：

在 updated 生命周期钩子中使用 $vnode 对比前后两次渲染的 VNode：

 <!-- MyComponent.vue -->
 <template>
   <el-button @click="updateMessage">{{ message }}</el-button>
 </template>
 
 <script>
 import { ElButton } from 'element-ui';
 
 export default {
   components: {
     ElButton
   },
   data() {
     return {
       message: 'Hello, Vue!'
     };
   },
   methods: {
     updateMessage() {
       this.message = 'Updated message';
     },
     updated() {
       const previousVNode = this.$vnode;
       console.log('Previous VNode:', previousVNode);
     }
   }
 };
 </script>

当点击按钮触发 updateMessage 方法更新 message 数据时，updated 钩子会输出前一次渲染的 VNode，你可以通过比较前后两次的 VNode 进行一些自定义的逻辑处理。这样的场景通常用于高级的组件开发和性能优化。