vue組件學習（下）

時間 2019-12-07

標籤 vue 組件學習简体版

原文原文鏈接

上次咱們說了什麼是組件，和它的基本應用，下面咱們來看一下我自認爲的進階內容。html

子組件控制父組件

首先寫好基本結構，建立一個子組件

<!DOCTYPE html>
<html lang="en">
<head>vue

<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>app

<div id="app">
    {{text}}
    <children></children>
    <children></children>
    <children></children>
</div>
<script src="./../vue.js"></script>
<script>
    var children = {
        props:["child"],
        template:`<div></div>`
    }
    var vm = new Vue({
        el:"#app",
        data:{
            
        },
        components:{
            children
        }
    })

####父元素添加自定義事件ide

html：
<children @addNum ="add"></children> //這裏的名字能夠自定義，後面是函數名。函數

js：學習

vm中寫入methods且寫入函數，並在data中寫入數據ui

data：{this

text：0

}code

methods：{component

addNum(){
    this.text ++;
}

}

這裏寫完大多數初學者會以爲，這有事件，也綁定了，應該就能夠了吧。但不要忘了，這是自定義的，會報錯的，通常咱們會經過子組件去控制它，具體怎麼作呢？下面的內容就是重中之重了。

在咱們子組件模板中的元素中寫入點擊事件

template:<button @click="click">{{counter}}</button>

爲了更好的看下效果咱們給子元素也加上數據，經過data函數。

data(){

return{
    counter
}

}

在methods中添加事件

methods:{

click(){
    this.counter ++;  // 這裏咱們爲了更好的看到效果。
    this.$emit("addNum")    //這裏的$emit是起到觸發做用的，也就是說咱們想讓子組件控制父組件必須用這個屬性進行觸發。也能夠把子組件控制父組件這一過程理解爲表單提交，而$emit就是最後的提交。
}

}
這樣就基本完成了子組件控制父組件功能。

插值

組件還有一個很重要的東西叫作插槽 slot。

這個標籤會把咱們在html裏的自定義標籤裏的內容放在自身上來，通常用在模板中，例如

<div id="app">
        <children>1111</children>
    </div>
    <script src="./../vue.js"></script>
    <script>
        var children = {
            template:`<div><slot></slot></div>` //這裏就會把咱們自定義標籤<children></children>裏的內容放到slot中，slot標籤不會在頁面中顯示，它只是一個功能標籤
        }
        var vm = new Vue({
            el:"#app",
            data:{
                
            },
            components:{
                children
            }
        })
    </script>

固然咱們要注意一種特殊狀況，若是咱們的自定義標籤沒有內容，咱們能夠在slot中加入內容爲默認內容，可是若是咱們設置了默認內容，而咱們的自定義標籤也不是空的，那麼自定義標籤裏的內容會替代咱們的默認內容。

若是咱們的自定義標籤不僅一條內容，這是咱們該怎麼辦呢？

這是就用到咱們的 slot裏name屬行了

例如：

<div id="app">
        <children>   // 這裏咱們有多條數據
            <div slot= "header">這是頭</div>  // 這裏咱們根據name的不一樣去綁定不一樣數據
            <div slot="footer">這是尾</div>
        </children>
    </div>
    <script src="./../vue.js"></script>
    <script>
        var children = {
            template:`<div><slot name="header"></slot><slot name="footer"></slot></div>`  // 設置不一樣name
        }
        var vm = new Vue({
            el:"#app",
            data:{
                
            },
            components:{
                children
            }
        })
    </script>

這樣，咱們就能夠根據name的不一樣而進行得到不一樣的數據了

vue組件遠不止如此，這只是一些較爲基礎的東西。更多的組件知識咱們能夠經過官方來進行學習 https://cn.vuejs.org/v2/guide...