vue使用组件时的注意点

最新推荐文章于 2023-02-14 17:08:39 发布

小朱要努力

最新推荐文章于 2023-02-14 17:08:39 发布

阅读量394

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45129940/article/details/107314408

版权

vue使用组件的注意点

注意点1. 当我们在使用子组件插入到像table、ul、ol等等这些标签的时候会出现一个H5的bug，如下图所示

<div id="app">
        <table>
            <tbody>
              	<row></row> 
              	<row></row>
              	<row></row>
            </tbody>
        </table>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("row", {
            data: function() {
                return {
                    
                }
            },
            template: "<tr><td>1123</td></tr>"
        })
        const vm = new Vue({
            el: "#app"
        })
    </script>

在这里可以看到，我们是将创建的子组件引入到table标签里面的，但是在我们页面看到的却不是和我们想的一样，那是因为H5的标准里面table里面没有包含row标签，所以这里会把row标签直接排除到table标签之外，但是可以先声明tr标签再通过vue中的is属性指向创建好的子组件就可以解决问题

 <div id="app">
        <table>
            <tbody>
               <tr is="row"></tr>
               <tr is="row"></tr> 
               <tr is="row"></tr>  
            </tbody>
        </table>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("row", {
            data: function() {
                return {
                    
                }
            },
            template: "<tr><td>1123</td></tr>"
        })
        const vm = new Vue({
            el: "#app"
        })
    </script>