Vue — vue中帶有$的屬性和方法

萬事順意發表於2024-03-14
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>

相關文章