Vue(五)--组件

1、组件也需要进行注册才可以使用:分为局部注册和全局注册

    <body>
        <div id="app" >
            <my-component></my-component>
            <my-component2></my-component2>
        </div>
    </body>

<script>
    //全局注册组件
    Vue.component('my-component',{
        template:"<div>my first globa component</div>"
    })
    var Child={
        template:"<div>my first  component22</div>"
    }
    var app = new Vue({
        el:"#app",
        //局部注册组件
        components:{
            'my-component2':Child
        }

    })
</script>

  注意事项,template中,必须被一个元素包含。

2、 限制元素<table> <tr><ul><ol><select>,这些本来是不能嵌套div元素的,现在使用is属性,替换,实现可嵌套

 <table>
         <tbody is="my-component"></tbody>
</table>
//渲染之后结果
<table>
    <div>my first globa component</div>
</table>

3、component有的选项

template:模板字符串

data:是一个函数,return回去,如果return回去的是外部的数据,那么是共享的,如果是内部的,就是独立的。

methods

computed
props: 是一个数组
<my-component message="来自父组件的数据"></my-component>
//加v-bind是动态数据,直接使用是传递,固定的字符串
<my-component :message="parentMessage"></my-component>

4、组件通讯

 

posted @ 2018-06-13 16:14  FeelRose  阅读(223)  评论(0编辑  收藏  举报