Vue组件使用技巧——is属性

最新推荐文章于 2024-07-19 07:46:30 发布

原创最新推荐文章于 2024-07-19 07:46:30 发布 · 719 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文探讨Vue组件中is属性的使用，如何在特定标签如<template>、<p>下插入自定义组件，避免浏览器解析错误。通过示例说明，is属性允许我们在不合法的位置动态插入组件，实现更灵活的组件化开发。

is属性

首先，提起Vue的组件，大家都不会陌生，使用起来就像使用普通标签一样简单，功能也可以随意定制，真的是很方便.

但是基于html语法，一些特定的标签，比如<ul>，<select>等.

在<ul>标签下，只有<li>标签是有效的，同理<select>表现下只有<option>有效，那么如果我们想加入自定义的组件该怎么办呢.

这种方法显然是不太适合的：

<ul>
	<my-component></my-component>
</ul>

这时候就是is出场的时候了.

引用官方的示例：

<div id="app">
    <form @submit.prevent="addNewTodo">
        <label for="new-todo"></label>
        <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
        <button>Add</button>
    </form>
    <ul>
        <li is="todo-item" v-for="(todo, index) in todos" :key="index"
         :title="todo.title" @remove="todos.splice(index, 1)"></li>
    </ul>
</div>

Vue.component("todo-item", {
    template: '\
        <li>\
            {{ title }}\
            <button @click="$emit(\'remove\')">Remove</button>\
        </li>\
    ',
    props: ['title']
});
let vm = new Vue({
    el: "#app",
    data: {
        newTodoText:"",
        todos: [
            {
                id: 1,
                title: 'Do the dishes',
            },
            {
                id: 2,
                title: 'Take out the trash',
            },
            {
                id: 3,
                title: 'Mow the lawn'
            }
        ],
        nextTodoId: 4
    },
    methods: {
        addNewTodo(){
            this.todos.push({
                id: this.nextTodoId++,
                title: this.newTodoText
            });
            this.newTodoText = "";
        }
    }
});

页面效果：
在这里插入图片描述
这里我们使用了①

<li is="todo-item" v-for="(todo, index) in todos" :key="index"
         :title="todo.title" @remove="todos.splice(index, 1)"></li>

而不是②

<todo-item v-for="(item, index) in todos" :key="item.id" :title="item.title"></todo-item>

由于①使用的是<li>标签，所以在<ul>中是没有任何问题的，但是这里的关键在于is="todo-item"属性，它实现的效果和②是相同的，但是重要的是它不会引起浏览器解析的错误.