开发Vue组件细节点

1.在组件定义data只能是函数,不能是对象

        Vue.component('row',{
            data:function () {
                return{
                    content: 'this is function'
                }
            },
            template: '<tr><td>{{content}}</td></tr>'
        })

2.Vue组件is特性

因为vue模板就是dom模板,使用的是浏览器原生的解析器进行解析,所以dom模板的限制也就成为vue模板的限制了,要求vue模板是有效的HTML代码片段。但是由于dom的一些html元素对放入它里面的元素有限制,所以导致有些组件没办法放在一些标签中,比如<ul></ul>  <select></select><a></a> <table></table>等等这些标签中,所以需要增加is特性来扩展,从而达到可以在这些受限制的html元素中使用。例如:

     <table>
         <tbody>
              <tr is="row"></tr>
          </tbody>
          </table>


    <script>
        Vue.component('row',{
            data:function () {
                return{
                    content: 'this is function'
                }
            },
            template: '<tr><td>{{content}}</td></tr>'
        })
    </script>

3.ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

 <counter ref="one" @change="handleChange"></counter>

 <script>
    ue.component('counter',{
            template: '<div @click="handleClick">{{number}}</div>',
            data:function () {
                return{
                    number:0
                }
            },
            methods:{
                handleClick:function () {
                    this.number++;
                }
            }
        })
 </script>

猜你喜欢

转载自blog.csdn.net/aoshiyunlong/article/details/89377247