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裏的數據內容了

還有不少這樣的方法能夠參照官網進行操做https://cn.vuejs.org/v2/guide...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。