Vue中的动态组件 - is 属性的另一面知识

·  阅读 390

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

写在开头

这是一篇短文!短文!短文!了解一下,很快的,你又会进步一点噢。(✪ω✪)

在使用 HTML 标签的时候,大部分标签的使用是自由奔放的,可以随意两者去镶嵌使用,但是有几个标签是需要我们注意的,如 <table><ul><ol> 与 <select> 这几个标签,其内部能出现的标签是有严格限制的。

举个栗子,<table> 标签内部应该出现 <thead><tbody><tr> 等标签,<ul> 标签的内部应该出现 <li> 标签。但是,如果强行把 <h1> 标签写下它们内部下,又会发生什么呢?

<!DOCTYPE html>
<html>
<head>
  <title>is</title>
</head>
<body>
  <table>
    <h1>橙某人</h1> 
  </table>
  <ul>
    <li>我是li</li>
    <h1>我不是li</h1>
  </ul>
</body>
</html>
复制代码

image.png

观察上图,我们发现,直接写在 <table> 标签内部下的 h1 标签,竟然被移动到 <table> 标签外了,而写在 <ul> 标签下的 <h1> 虽然没有被移动,但是也没有被 <ul> 本身识别处理,直接就被无视了。

0163F0F9.png

(啊...就这?好吧,我知道了,我以后注意下,不这么写不就行了  ̄▽ ̄)

一个坑

应该正常来说,大部分人不会去这么写,但是对于用 Vue 的小伙伴来说,我猜可能还是有人踩过坑的,先来看看以下的两段伪代码。

<table>
  <my-row v-for="(item, index) in list" :key="index"></my-row>
</table>
// or
<ul>
  <my-li v-for="(item, index) in list" :key="index"></my-li>
</ul>
复制代码

是不是非常非常熟悉?它们有问题?没有问题?一半一半吧!

如果你是在工程化的 Vue 项目中,也就是写到 .vue 文件里的,那没有问题,在编译阶段的时候,Vue 会帮你处理。

但是,如果你是 CDN 形式的项目,那你就要注意了,比如:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>is</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.4/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <my-row></my-row>
    </table>
  </div>
  
  <script>
    Vue.component('my-row', {
      template: `<h1>橙某人</h1>`
    })
    new Vue({
      el: "#app"
    })
  </script>
</body>
</html>
复制代码

image.png

那你依然会产生上面的问题,这个问题可能是初学者才比较容易遇到,Vue 官网也有略微提及。点这里

is属性来填坑

Vue 官网既然有提及到这个问题,当然也有对应的解决方法了,答案就是 is属性 。熟悉动态组件的小伙伴可能就对它比较熟了。is属性 经常被用于配合内置组件 component 来实现动态组件的效果。

但它也可以被用来解决这个问题,我们把上面的代码稍微改改:

<!DOCTYPE html>
<html>
<head>
  <title>is</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.4/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tr is="my-row"></tr>
    </table>
  </div>
  
  <script>
    Vue.component('my-row', {
      template: `<h1>橙某人</h1>`
    })
    new Vue({
      el: "#app"
    })
  </script>
</body>
</html>
复制代码

image.png

这样子坑就填起来了,虽然是个很微小的问题,但也值得被记录,那就到此为止了,本章完。(◕ˇ∀ˇ◕)






至此,本篇文章就写完啦,撒花撒花。

image.png

希望本文对你有所帮助,如有任何疑问,期待你的留言哦。
老样子,点赞+评论=你会了,收藏=你精通了。

分类:
前端
标签:
分类:
前端
标签: