vue.js组件学习（上）

时间 2019-12-07

原文原文链接

组件是vue.js中很是重要的一部分，打个比方，会用组件得人喝着茶就写完的页面，不会用的代码打到手抽筋也未必完的成。

首先何为组件

组件能够封装重用的代码，扩展HTML元素，更高的说组件是自定义元素。html

组件化的html

写入vue.js的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="./../vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app", 
        })
    </script>
</body>
</html>

而后实例new中加入components 组件vue

components:{ child }  //注册局部组件

在id=app中添加<child></child>app

实例化一个child对象，里边添加模板组件template，而后添加内容为ide

template:"<div class="child">children</div>"  //这里的模板会替代child

这样咱们就能够在后台发现多出来一个class名为child的标签，页面内容为children组件化

可咱们想组建出多个该怎么弄呢？

只须要在咱们在components组件中加入childSiblingui

components:{ child，childSibling }

而后如同上边同样实例一个childSibling对象那样，而后在id="app"中再添加一个<child-sibling>自定义标签，这样咱们就能够获得两个标签了。这里要注意这里的命名转换code

建立子组件

首先，咱们应实例化一个子组件soncomponent

var son = {
    template:"<div>这是子元素</div>"
}

而后咱们要在目标父组件中添加components组件，里边写入这个son，再而后在template中添加<son></son>htm

template:"<div><son></son</div>"

这样咱们就完成了html的组件化，固然实际应用不可能这么简单，不过都是以此类推的。对象

从父元素中获取数据

若是咱们用常规的方法获取data里数据添加到模板里会报错，这时就用到props，这个属性是用来声明子组件预期的数据，咱们能够经过这个方法来获得data里的数据。

声明子组件预期的数据

props:["预期数据"]

绑定data数据,假设父元素为<ele>

data：{
    数据："111"
}

<ele v-bind 预期数据="数据" ></ele>

这样咱们在组件中添加预期数据就可获得data里的数据内容了