Vue — vue中带有$的属性和方法

在 Vue.js 中，以 $ 开头的属性通常是框架内部提供的特殊属性或方法，用于访问 Vue 实例的一些内部属性或执行特定的操作。以下是一些常见的以 $ 开头的属性：

属性：

1.$data：Vue 实例的数据对象，包含实例中定义的数据。

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  }
});

console.log(app.$data.message); // 输出：Hello, Vue!

2.$props：包含了父组件传递给子组件的属性。

Vue.component('my-component', {
  props: ['message'],
  mounted() {
    console.log(this.$props.message); // 输出：Hello, Vue!
  }
});

3.$el：Vue 实例关联的根 DOM 元素。

const app = new Vue({
  el: '#app'
});

console.log(app.$el); // 输出：#app 元素的 DOM 引用

4.$options：用于当前 Vue 实例的初始化选项。

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log(this.$options.data().message); // 输出：Hello, Vue!
  }
});

5.$refs：包含了组件中所有拥有 ref 特性的 DOM 元素或子组件实例。

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log(this.$options.data().message); // 输出：Hello, Vue!
  }
});

6.$emit()：在子组件中触发父组件的事件。

<div id="app">
  <my-component @custom-event="handleCustomEvent"></my-component>
</div>

<script>
Vue.component('my-component', {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello from child component!');
    }
  }
});

const app = new Vue({
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出：Hello from child component!
    }
  }
});
</script>

7.$on()：监听当前实例上的自定义事件。

const app = new Vue({
  created() {
    this.$on('custom-event', data => {
      console.log(data); // 输出：Hello from child component!
    });
  }
});

8.$nextTick()：在下次 DOM 更新循环结束之后执行延迟回调。

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';

      this.$nextTick(() => {
        console.log(this.$el.textContent); // 输出：Updated message
      });
    }
  }
});

9.$watch()：用于观察 Vue 实例上的数据变化。

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message(newMessage, oldMessage) {
      console.log(`Old message: ${oldMessage}, New message: ${newMessage}`);
    }
  }
});

10.$router：Vue Router 实例，用于在 Vue 应用中进行路由导航。

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

const app = new Vue({
  router,
  methods: {
    goToAboutPage() {
      this.$router.push('/about'); // 导航到 /about 页面
    }
  }
});

11.$attrs：用于访问父组件传递给子组件但子组件没有显式声明接收的非 prop 特性（attribute）集合。

<div id="app">
  <my-component title="Custom Title"></my-component>
</div>

<script>
Vue.component('my-component', {
  mounted() {
    console.log(this.$attrs.title); // 输出：Custom Title
  }
});

const app = new Vue();
</script>

方法

1.$set(object, key, value)：在 Vue 实例或组件实例中设置响应式属性的方法。

const vm = new Vue({
  data: {
    obj: {}
  }
});

vm.$set(vm.obj, 'newKey', 'newValue');

2.$delete(object, key)：在 Vue 实例或组件实例中删除属性的方法。

const vm = new Vue({
  data: {
    obj: { key: 'value' }
  }
});

vm.$delete(vm.obj, 'key');

3.$forceUpdate()：强制当前 Vue 实例重新渲染。

const vm = new Vue({
  data: {
    message: 'Hello'
  },
  methods: {
    updateMessage() {
      this.message = 'Updated';
      this.$forceUpdate();
    }
  }
});

4.$createElement()：用于创建虚拟 DOM 元素的方法，通常在渲染函数中使用。

const MyComponent = {
  render(createElement) {
    return createElement('div', 'Hello, Vue!');
  }
};

5.$destroy()：销毁当前 Vue 实例。

const vm = new Vue({
  el: '#app'
});

vm.$destroy();

6.$refs：引用子组件或 DOM 元素的特殊属性。

html
<div id="app">
  <my-component ref="myRef"></my-component>
</div>

<script>
const app = new Vue({
  mounted() {
    console.log(this.$refs.myRef); // 输出：子组件的实例或 DOM 元素的引用
  }
});
</script>

7.$slots：访问插槽内容的属性，用于处理父组件传递的内容。

<my-component>
  <span slot="header">Header</span>
  <span slot="footer">Footer</span>
</my-component>

8.$scopedSlots：访问具名插槽内容的属性，用于处理父组件传递的具名插槽内容。

<my-component>
  <template v-slot:default="slotProps">
    <span>{{ slotProps.text }}</span>
  </template>
</my-component>