$attr 是一個 Vue.js 的實例屬性,它包含了當(dāng)前組件的屬性列表。
下面是一個簡單的例子,我們可以在 Vue 模板中使用 $attr 屬性來獲取組件內(nèi)部特定HTML標(biāo)簽的屬性:
Vue.component('my-component', { template: '' }); Vue.component('my-other-component', { template: 'hello ', mounted: function(){ console.log(this.$refs.myComponent.$el.outerHTML); //helloconsole.log(this.$refs.myComponent.$attr); // {ref: "myComponent"} } });
在這個例子中,我們創(chuàng)建了兩個 Vue 組件。第一個組件是 my-component,它包含了一個<slot>
標(biāo)簽,用于插入用戶定義的 HTML 內(nèi)容。第二個組件是 my-other-component,它只是使用 my-component 組件,并使用 $refs 屬性引用它。
在 my-other-component 組件的 mounted 生命周期鉤子中,我們可以使用 $refs 屬性來獲取 my-component 組件實例,然后我們就可以訪問 $attr 屬性以獲取組件內(nèi)的 attr 屬性對象。
總而言之,$attr 屬性是一個很有用的工具,使我們可以在Vue組件內(nèi)部訪問特定HTML標(biāo)簽的屬性。