一、组件注册
1.全局组件注册
Vue.component(组件名称, {
data: 组件数据,
template: 组件模板内容
})（1）简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--父组件-->
<div id="app">
<!--三个子组件-->
<!--每个组件都是一个独立的实力，它们之间的数据是相互独立的-->
<one-component></one-component>
<one-component></one-component>
<one-component></one-component>
<two-component></two-component>
</div>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript">
/*
全局组件注册
*/
// 方法一
// 第一个参数是 组件名称
Vue.component('one-component', {
// 第二个参数 data 是一个函数，用于存放数据
data: function(){
return {
count: 0
}
},
// template 用来定义组件的模板内容
// 因为最外层用的单引号，所以绑定事件的时候，不能再用单引号了
// 组件模板内容必须是单个跟元素，即最外层组件只能为一个，不能为两个兄弟组件（项目需求可以在最外面加一个 div），本例中为一个按钮
// 注意，这里是单引号
template: '<button @click="handle">点击了{{count}}次</button>',
methods: {
handle: function(){
this.count++;
}
}
})
// 方法二（模板比较复杂时最好这样写）
Vue.component('two-component', {
// 第二个参数 data 是一个函数，用于存放数据
data: function(){
return {
count: 0
}
},
// template 用来定义组件的模板内容
// 因为最外层用的单引号，所以绑定事件的时候，不能再用单引号了
// 组件模板内容可以是模板字符串（ES6语法规则，需要浏览器支持）（学完前端工程化以后可以忽略这里）
// 组件模板内容必须是单个跟元素，即最外层组件只能为一个，不能为两个兄弟组件（项目需求可以在最外面加一个 div），本例中为一个按钮
// 注意，这里是 反引号
template: `
<div>
<button>测试按钮1</button>
<button>测试按钮2</button>
</div>
`,
methods: {
handle: function(){
this.count++;
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
</html>
（2）命名方式
短横线方式
Vue.component('my-component', { /* ... */ })驼峰方式
Vue.component('MyComponent', { /* ... */ })<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!--就算定义了驼峰式组件，在普通标签模板中也不可以用驼峰形式引用，因为html语言对大小写不敏感，需要将驼峰式写法改成短横线式-->
<hello-world></hello-world>
<button-counter></button-counter>
</div>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript">
Vue.component('HelloWorld', {
data: function(){
return {
msg: 'HelloWorld'
}
},
template: '<div>{{msg}}</div>'
});
Vue.component('button-counter', {
data: function(){
return {
}
},
<!--定义的驼峰式组件在字符串模板中可以使用驼峰式引用-->
template: `
<div>
<label>button-counter</label>
<HelloWorld></HelloWorld>
</div>
`,
methods: {
}
})
let vm = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
</html>
2.局部组件注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--vue 组件是所有组件的父组件，所以可以使用任何定义的组件-->
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript">
// 定义全局组件
// 局部组件只能在注册他的父组件中使用
Vue.component('ComponentA',{
data: function(){
return{
msg: 'ComponentA'
}
},
// 不具备父子关系的组件之间是不可以互相调用的（只有父组件才可以调用子组件
// template: '<component-b></component-b>' 是错误的
template: '<div>{{msg}}</div>'
});
// ===========================================================================================
// 定义局部组件
// 定义组件内容
let ComponentB = {
// 局部组件中的数据
data: function(){
return {
msg: 'ComponentB'
}
},
// 局部组件中的模板
template: '<div>{{msg}}</div>'
};
let vm = new Vue({
el: '#app',
data: {
},
// 注册局部组件
// 步骤一
// components 关键字用来注册局部组件，左边为组件名，右边为组件对象；组件对象可以单独定义
components: {
'component-b': ComponentB
}
});
</script>
</body>
</html>