Javascript - Vue - 組件

時間 2019-11-18

原文原文鏈接

建立組件

組件是能夠重複使用的html容器，能夠把它註冊到全局的Vue或實例的vue對象上，使它成爲全局組件或vue對象的子組件，而後能夠將它的html標籤插入html文檔中。組件的html只能有一個root元素。css

使用聲明式的方法建立組件html

//方式一
var tt=Vue.extend({
    template:"<div>hello vue</div>"
});

Vue.component("tt", tt); //參數1是組件的html標籤名，參數2是組件對象名

//方式二
var tt = {
    template: "<div>hello vue</div>"
};

Vue.component("tt", tt);

//方式三
var vv = new Vue({
    el: ".box",
    components: {
        tt: {
            template: "<div>hello vue</div>"
        }
    }
});

template指向的html還能夠直接寫在template標籤裏，而後經過id或class引入vue

<template id="template-box">
<div>hello vue</div>
</template>

使用vue文件建立組件dom

建立一個components目錄，在目錄下建立一個html，把後綴名改成.vue，清空該文檔，而後把template寫進去。這種文件就是vue專用的組件文件，在template標籤下能夠寫任何html標籤，支持html、script、style標籤。ide

<template>
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
    //此處能夠使用ES6語法導入js、css文件

    //表示導出這個組件對象
    export default {
        //組件對象能夠當作是一個特殊的vue對象，用法與在vue對象差很少，只是data必須是一個函數，它必須返回一個匿名的對象，而真正的data就放在匿名對象中
        data: function () {
            return {
                msg:"hello vue"
            }
        }
    }
</script>
<style></style>

而後導入這個組件對象，把它註冊在vue對象上函數

import Vue from "vue";
import tt from "./components/tt.vue";

var vm = new Vue({
    el: ".box",
    components: {
        tt: tt
    }
});

如今能夠在vue對象綁定的那個html中使用組件了post

*組件的html名字若是是駝峯形式，那麼插入html時，必須使用連字符：學習

var tt = {
template:"<div>hello vue</div>"
}

Vue.component("myCom",tt);

<my-com></my-com> 　

子父組件傳值

子組件取父組件的數據、調用父組件的函數 $parentthis

var vm = new Vue({
    el: ".box",
    data: {
        msg:"test"
    },
    methods: {
        getParentFunction: function () {
            alert("OK");
        }
    },
    components: {
        tt: tt
    }
});

<template>
    <div>
        <button @click="getParentData">getParentData</button>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                msg:"hello vue"
            }
        },
        methods: {
            getParentData: function () {
                alert(this.$parent.msg);
                this.$parent.getParentFunction();
            }
        }
    }
</script>　　

父組件取子組件的數據 $refsspa

使用vue的$refs對象能夠獲取爲子組件定義的ref引用，經過這種方式獲取子組件對象，而後獲得子組件的數據或函數。ref只能用在子組件上，對父組件無效。

<template>
    <div></div>
</template>

<script>
    export default {
        data: function () {
            return {
                msg: "hello vue"
            }
        },
        methods: {
            getChildFunction: function () {
                alert("OK");
            }
        }
    }
</script>

切換子組件

除了html標籤：template，vue還提供了component標籤，這個html標籤用於裝載組件，它的html屬性：is用於指定裝載的組件的名字（組件對象的名字），利用is屬性能夠實如今html標籤component中動態切換組件。

<div id="box">
    <a href="#" @click="login">login</a>
    <a href="#" @click="register">register</a>
    <component :is="componentName"></component>
</div>

<script>
Vue.component("login", {
    template: "<h3>login區域</h3>"
});

Vue.component("register", {
    template: "<h3>register區域</h3>",
});

var vm = new Vue({
    el: "#box",
    data: {
        componentName:null
    },
    methods: {
        login: function () {
            this.componentName = "login";
        },
        register: function () {
            this.componentName = "register";
        }
    }
});