千峰java 笔记整理_JAVA学习笔记系列：菜鸟Vue学习笔记（四）

菜鸟Vue学习笔记(四)

上周学习了使用Vue来操作表单元素进行数据双向绑定，今天我们来学习下Vue中的组件，Vue中的组件作用就是去封装一些常用的页面标签，将其当做一个整体，以便在其他位置直接使用一组标签。例如：

Vue.component("hello", {

template: "

hello

"

});

这是定义了一个全局的组件，在其他位置使用方式为：

好，我们初步的认识了组件，感觉它就像一个自定义标签一样。那么Vue的组件到底有哪些方式定义呢？Vue组件分为全局组件和局部组件，顾名思义，全局组件就是在所有引用到此组件的地方都可以使用，而局部组件只能在定义局部组件对应的地方使用。

例如：定义全局组件

Vue.component("hello", {

template: "

hello

"

});

定义局部组件：

var v = new Vue({

el: "#box",

components: {

"test" : {

template: "

hello

"

}

}

});

组件不一定都是单纯的静态组件，也可以在组件中绑定变量。例如：

Vue.component("hello", {

template: "

{{msg}}

",

props: ["msg"]

});

var v = new Vue({

el: "#box",

data: {

a: "0"

}

});

使用时，需要指定变量，例如：

基本的组件使用我们暂时说到这，下次我们说说路由的使用。