Vue 组件你不知道的一个细节

你能确保解析出正确的DOM结构吗?

在h5的table中,什么元素可以出现在其内部是严格定义的,比如我们想要<table>中有<tbody>,<tbody>中有<tr>....,而不是<tbody>中有个其他不该属于的标签,比如自己定义一个组件,里面模板还是<tr>....</tr>,这样会失败!

我们来看看最先会遇到什么问题,代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件细节is使用
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <table>
                <tbody>
                    <row></row>
                </tbody>
            </table>
        </div>
        <script> 
            Vue.component('row', {
                template: '<tr><td> this is a row</td></tr>'
            })
            var vm = new Vue({
                el: '#app'
            })
        </script>
    </body>
</html>

运行结果

这个可不是我们想要的,尽管能够显示结果,但是我的row组件明明写在<tbody>里面,为什么出现在了外面?

 

记得vue中还有动态组件,类似于<component :is="xxxx"></component>要不我们来试试?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件细节is使用
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <table>
                <tbody>
                    <component :is="comName"></component>
                    <!-- <tr :is="comName"></tr> -->
                </tbody>
            </table>
        </div>
        <script> 
            Vue.component('row', {
                template: '<tr><td> this is a row</td></tr>'
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    comName: 'row'
                }
            })
        </script>
    </body>
</html>

这么写和刚刚是一模一样的结果,dom结构中<tr>还是在<table>之外,那到底有没有解决办法呢?当然是有的

有些 HTML 元素,诸如 <ul><ol><table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。<table>之内,那就不能随便写一个标签,它不认的!!而有些元素,诸如 <li><tr> 和 <option>,只能出现在其它某些特定的元素内部。我们上面写的<row>和<component>都被作为无效的内容提升到<table>外部,并导致最终渲染结果出错

正确的应该怎么写的,代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件细节is使用
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <table>
                <tbody>
                    <tr is="row"></tr><!-- 这里is前面没有冒号 -->
                </tbody>
            </table>
        </div>
        <script> 
            Vue.component('row', {
                template: '<tr><td> this is a row</td></tr>'
            })
            var vm = new Vue({
                el: '#app'
            })
        </script>
    </body>
</html>

运行结果

比如ul、ol中只能放li,如果要用组件,就要和上面一样的写法<li is="你的组件名"></li>
select中只能放option,如果要用组件,则<option is="你的组件名"></option>
这样才确保所有浏览器解析出来正确的DOM结构

 

 

关注、留言,我们一起学习。

 

===============Talk is cheap, show me the code================

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页