vue之$options

一、是什么？

vue实例属性$options是一个对象,可以调用vue的各个组件下的方法和数据

即new vue({})大括号内的东西，统称为options

二、怎么用？

获取、调用data外定义的属性

<script>
export default {
  data() {
    return {
    };
  },
  //在data外面定义的属性和方法通过$options可以获取和调用
  name: "options_test",
  age: 18,
  testOptionsMethod() {
    console.log("hello options");
  },
  created() {  
    console.log(this.$options.name);  // options_test
    console.log(this.$options.age);  // 18
    this.$options.testOptionsMethod();  // hello options
  },
</script>

复用过滤器filters中的方法

//常用于在表达式的尾部
<div>{{ text | filterText }}</div>

export default {
    data() {
        return {
            text: 'hello'
        }  
    },
    filters: {
        filterText: function (value) {
            if (!value) return ''
          	return value + ' options'
         }
    },
  	methods:{
      getTextFn(){
        let filterText = this.$options.filters.filterText
        this.text = filterText('Hi')
      }, 
    },
}

一键搞定之重置data中的数据

<script>
    export default {
        data() {
            return {
                // 表单
                searchForm: {
                    input: ''
                }
            }
        },
        methods: {
            retset() {
                //重置某一个表单数据
                this.searchForm = this.$options.data().searchForm;
              	//重置整个$data
              	this.$data = this.$options.data();
            }
        },
    }
</script>