Javascript - Vue - 组件

创建组件

组件是可以重复使用的html容器，可以把它注册到全局的Vue或实例的vue对象上，使它成为全局组件或vue对象的子组件，然后可以将它的html标签插入html文档中。组件的html只能有一个root元素。

使用声明式的方法创建组件

//方式一
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引入

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

var tt=Vue.extend({
    template:"#template-box"
});

var tt = {
    template: "#template-box"
};

var vv = new Vue({
    el: ".box",
    components: {
        tt: {
            template: "#template-box"
        }
    }    
});

使用vue文件创建组件

创建一个components目录，在目录下创建一个html，把后缀名改为.vue，清空该文档，然后把template写进去。这种文件就是vue专用的组件文件，在template标签下可以写任何html标签，支持html、script、style标签。

<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中使用组件了

<div class="box">
    <tt></tt>
</div>

*组件的html名字如果是驼峰形式，那么插入html时，必须使用连字符：

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

Vue.component("myCom",tt);

<my-com></my-com>   　

子父组件传值

子组件取父组件的数据、调用父组件的函数 $parent

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>　　

父组件取子组件的数据 $refs

使用vue的$refs对象可以获取为子组件定义的ref引用，通过这种方式获取子组件对象，然后得到子组件的数据或函数。ref只能用在子组件上，对父组件无效。

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

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

<div class="box">
    <tt ref="mytt"></tt>
</div>

var vm = new Vue({
    el: ".box",
    methods: {
        getChildData: function () {
            alert(this.$refs.mytt.msg);
            this.$refs.mytt.getChildFunction();
        }      
    },
    components: {
        tt: tt
    }    
});

切换子组件

除了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";
        }
    }
});

渲染组件

vue提供render来将组件对象渲染到html文档，这样做会使组件直接替换掉绑定到vue上的那个html元素。

var tem = {
    template: "<h1>hello world</h1>"
};

var vm = new Vue({
    el: "#box",

   //不需要注册组件对象，直接替换即可
    render: function (create) {
        return create(tem);
    }
});

组件的生命周期

与vue对象的生命周期是一样的。

在vue组件文件中获取外部文件中的dom元素

通常情况下，一个页面会有N个组件，如果你使用.vue文件创建组件，那么在组件文件中如何访问在同一个页面上的其它组件里的html元素呢？答案是只要这些组件在同一个页面上，那就可以直接使用js原生方法document.querySelector获取其它组件里的html元素。

Javascript - 学习总目录