每日总结-一一网

Vue的组件

组件是Vue中极其重要的组成部分，Vue编写的页面，都可以划分为数个组件来组合实现。实质就是一个可复用的模板。创建一个拥有指定功能的组件，在任何需要使用的时候，都可以直接拿来使用。
组件分为全局组件和局部组件两种。
注册一个简单的全局组件：

Vue.component('first',{
templete:'<p>Vue组件</p>'
})
复制代码

局部组件：

   new Vue({
            el:"#app",
            components:{
                first:{
                    template:"<h1>局部组件</h1>"
                },
                'second':{
                    template:"<h1>局部组件另一种写法</h1>"
                }
            }
        })
复制代码

用法：在页面中Vue实例中使用组件名字的标签。

<html>
<div id='app'>
<first></first>
</div>
</html>
复制代码

注意事项:
1.组件名不能和HTML中原有的标签名重名。
2.命名尽量使用驼峰命名法或在名字中间加入‘-’。
3.组件只能用于Vue实例对象中。全局组件可以用在任意一个Vue实例对象中。局部组件只能用在当前实例中。

is的用法

页面加载时，会先加载组件，最后再加载其他标签，这样会导致实际显示的顺序与排版顺序不同，从而导致排版错乱，可以使用is调整组件的加载时间。is是Vue当中的属性，其后面需要写组件名。用法： (事先定义一个名为‘goods的组件’)

<div id='app'>
    <div class='goodList'>
       <div is='goods'>
       </div>
    </div>
</div>
复制代码

动态组件

实际页面中，某一处用的组件根据不同情况，可能需要调用不同的组件，而如果直接使用组件名，则不能根据实际情况切换组件，所以需要用到动态组件。
原理：通过使用Vue事件绑定变量，根据变量的变化而切换不同的组件名。
注意事项：动态组件需要在is前面加上：

组件的根节点

组件有且只有一个根节点，可以在一个根节点内部有多个其他的节点，但是所有的节点都只有同一个根节点。

data必须为函数

确保函数每次返回的对象，即便内容是一样的，也是一个新的对象

组件传值

组件上可以引用父组件的变量值。具体做法:在子组件的props属性里定义变量名，在组件标签里绑定父组件的变量名。

<html>
<div id='app'>
<first :messages='message'></first>
</div>
</html>


<script>
Vue.component('first',{
content:'<p>{{content}}-{{messages}}</p>',
props:['messages'],
data():{
content:666
}
})

new Vue({
el:'#app',
data:{
message:'组件'
}
})
</script>
复制代码