Vue---实例属性$options(获取data外面的数据和方法)

最新推荐文章于 2024-09-04 09:24:20 发布

muzidigbig

最新推荐文章于 2024-09-04 09:24:20 发布

阅读量8.8k

点赞数 4

分类专栏： vuejs 文章标签： vue.js options vue实例参数获取data外面的数据和方法

本文链接：https://blog.csdn.net/muzidigbig/article/details/122126636

版权

vuejs 专栏收录该内容

79 篇文章

订阅专栏

本文介绍了Vue实例属性$options的使用方法及其应用场景。详细解释了$options如何帮助开发者获取和调用在data外部定义的属性和方法，并展示了实际示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

大家都知道如何在Vue创建一个实列

const vm = new Vue(options)

在这里把Vue的实例命名为vm，这是尤雨溪的习惯，我们沿用

vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新...

vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue

options是 new Vue 的参数，我们一般称之为选项或者构造选项，用于当前 Vue 实例的初始化选项。

二、那么options里面有什么呢？

options的五类属性：

数据：data、 props、 propsData、 computed、methods、 Watch

DOM: el、 template、 render、 renderError

生命周期钩子: beforeCreate、 created、beforeMount、 mounted、 beforeUpdate、 updated、activated、 deactivated、 beforeDestroy、 destroyed、errorCaptured

资源: directives、 filters、 components

组合: parent, mixins、 extends、 provide、 inject

三、其他用途：

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处。

$option 是用来获取data外面的数据和方法。

this.$options 即可以获取自定义属性，也可以增加自定义属性，而且，获取自定义属性的方法有两种。

this.mydata = this.$options['myoption']
this.mydata1 = this.$options.myoption

<template>
  <div>
    <h2>Vue的实例属性 $options</h2>
    <button type="button" @click="handleClick">点击获取值</button>
    <p>data外部变量 {{ $options.obj.name }}---{{ $options.obj.age }}</p>
    <p v-if="mydata">data数据 {{ mydata.name }}---{{ mydata.age }}</p>
  </div>
</template>
<script>
export default {
  // 在data外面定义的属性和方法通过$options可以获取和调用
  obj: {
    name: "muzidigbig",
    age: 22,
  },
  say() {
    // this 指向当前实例对象
    // console.log(this);
    console.log("我是 data 外部方法");
  },
  data() {
    return {
      mydata: null,
    };
  },
  created() {
    // 调用 data 外部方法
    this.$options.say();
    console.log(this, this.$options);
    console.log(this.$options.obj);
  },
  methods: {
    handleClick() {
      // 修改 data 外部 obj 对象的数据，视图也会改变
      this.$options.obj["age"] = 23;
      // 将 obj 赋值给 mydata
      this.mydata = this.$options["obj"];
    },
  },
};
</script>