Vue元件使用技巧 is屬性

2021-10-05 10:10:19 字數 1361 閱讀 2825

首先，提起vue的元件，大家都不會陌生，使用起來就像使用普通標籤一樣簡單，功能也可以隨意定製，真的是很方便.

但是基於html語法，一些特定的標籤，比如，等.

在標籤下，只有標籤是有效的，同理表現下只有有效，那麼如果我們想加入自定義的元件該怎麼辦呢.

這種方法顯然是不太適合的：

>


>


my-component


>


ul>
這時候就是is出場的時候了.

引用官方的示例：

>


vue.


component


("todo-item",}\


remove\\'


,    props:


['title']}


);let vm =


newvue(,


,],        nexttodoid:4}


,    methods:);


this


.newtodotext ="";


}}})


;
頁面效果：

這裡我們使用了①

"todo-item" v-


for=


"(todo, index) in todos"


:key=


"index"


:title=


"todo.title" @remove=


"todos.splice(index, 1)"


>


<


/li>
而不是②

v-for


="(item, index) in todos"


:key


="item.id"


:title


="item.title"


>


todo-item


>
由於①使用的是標籤，所以在中是沒有任何問題的，但是這裡的關鍵在於is="todo-item"屬性，它實現的效果和②是相同的，但是重要的是它不會引起瀏覽器解析的錯誤.

Vue 元件例項屬性的使用

因為最近面試了 二 三十個人，發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點，讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件，並且實現的 demo 簡潔明瞭，我就不具體寫實現 了，文內只會貼需要...

Vue 元件例項屬性的使用

因為最近面試了 二 三十個人，發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點，讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件，並且實現的 demo 簡潔明瞭，我就不具體寫實現 了，文內只會貼需要...

Vue元件 元件的屬性

在html中使用元素，會有一些屬性，如class,id，還可以繫結事件，自定義元件也是可以的。當在乙個元件中，使用了其他自定義元件時，就會利用子元件的屬性和事件來和父元件進行資料交流。比如，子元件需要某個資料，就在內部定義乙個prop屬性，然後父元件就像給html元素指定特性值一樣，把自己的data...