Vue.js中创建组件主要有三个步骤：创建组件构造器，注册组件以及使用组件。
创建组件构造器
创建组件构造器的方法很简单，只需要以下语句即可：
var MyCompontent=Vue.extend({...});
然而这个时候还不能直接使用组件，需要把组件注册到应用中。
注册组件
Vue.js提供了两种注册组件的方式，分别为全局注册和局部注册，下边分别介绍：
全局注册：需要确保在根实例初始化之前注册，这样才能使组件在任意实例中都可以使用。注册方式如下：
Vue.component('my-components',myComponent);//这句代码一定要申明在new Vue({...});之前
注册过程中也指定了组件的HTML标签。
局部注册：限定了组件只能在被注册的组件中使用，而无法在其他组件中使用。
使用组件
<!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>vue组件(组件之间可以随意嵌套)</title>
<script src="./js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
//1.组件构造器
var myComponent = Vue.extend({
template: '<h3>这是一个利用组件构造器完成的组件</h3>'
});
Vue.component('hello', myComponent);
//2.第二种方法构建组件的方法(字符串模板)
Vue.component('my-hello', {
template: '<h4>这是第二种方法完成的组件</h4>'
});
var app = new Vue({
el: "#app",
data: {
msg: 'hello Vue!',
},
components: {
//3.组件的第三种写法 局部组件的写法 只能针对当前的vue实例
'my-components': {
template: '<h5>组件的第三种写法 局部组件的写法</h5>'
},
'my-list': {
template: '#list',
//在组件里面放入数据
data(){
return{
title:'标题',
item:[1,2,3,4,5]
}
}
},
'my-adress':{
template:'#myAdress',
data(){
//在组件里面写函数需要用return返回
return{
myAdress:'test111'
}
}
}
}
});
}
</script>
<!-- <template id="list">
<div>
<h3>组件的另一种写法</h3>
<ul>
<li v-for="v in item">{{v}}</li>
</ul>
</div>
</template> -->
<template id="myAdress">
<p>{{myAdress}}</p>
</template>
</head>
<body>
<div id="app">
<!-- 组件调用方法 -->
<hello></hello>
<my-hello></my-hello>
<my-components></my-components>
<my-list></my-list>
</div>
</body>
</html>
网友评论