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)  编辑  收藏  举报