Vue-组件内容补充

最新推荐文章于 2023-08-01 23:19:13 发布

VIP文章杯似坛酒

最新推荐文章于 2023-08-01 23:19:13 发布

阅读量168

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/abundoning/article/details/123480011

版权

Vue组件使用时出现的BUG

Vue组件通过 template 模板渲染表格、无序标签时，需要遵循 HTML5 规范，否则出错

- HTML5规则要求tbody标签下需要有tr,没有tr,组件生成表格将出现问题！因此不要在tbody下直接写组件生成表格

- HTML5规则要求ul标签下需要有li,没有li,也将将出现问题！

- 同样，HTML5规则下，ol标签、select标签也需要遵从上述规则

<body>
    <div id="app">
        <table>
            <tbody>
                <tr is="row"></tr>      <!--  HTML5规则要求tbody标签下需要有tr,没有tr,组件生成表格将出现问题！因此不要在tbody下直接写组件生成表格  -->
                <tr is="row"></tr>      <!--  HTML5规则要求ul标签下需要有li,没有li,也将将出现问题！因此<ul> <li is="row"></li> </ul>  -->
                <tr is="row"></tr>      <!--  同理，HTML5规则下，ol标签、select标签(option is 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>

Vue子组件(除根组件外所有组件)定义配置项 data 时，必须定义为函数，不能为对象

否则报错：[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

Vue.component('row',{
            data:function(){      
                return{                        
                    test:"this test"
                }
            },     
        })

Vue 父组件获取子组件 DOM

通过在子组件 V 层标签中添加引用(ref=" ")，使得父组件可以通过 $refs 方法获取子组的 DOM ，再引用配置项中的参数

<body>
    <div id="app">
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{
  {total}}</div>
    </div>

    <script>                            //组件使用中的 BUG
        Vue.component('counter',{
            template:'<div @click="handleClick">{
  {number}}</div>',
            data:function(){
                return {
                    number:0
                }
            },
            methods:{
                handleClick:function(){
                    this.number ++
                    this.$emit('change')
                }
            },
        })
        var vm =new Vue({
            el:"#app",
            data:{
                total:0
            },
            methods:{
                handleChange:function(){
                    this.total =this.$refs.one.number + this.$refs.two.number

最低0.47元/天解锁文章

杯似坛酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-组件内容补充

Vue组件使用时出现的BUG Vue组件通过 template 模板渲染表格、无序标签时，需要遵循 HTML5 规范，否则出错 - HTML5规则要求tbody标签下需要有tr,没有tr,组件生成表格将出现问题！因此不要在tbody下直接写组件生成表格 - HTML5规则要求ul标签下需要有li,没有li,也将将出现问题！ - 同样，HTML5规则下，ol标签、select标签也需要遵从上...
复制链接

扫一扫