组件使用:
步骤:
1. 创建组件构造器,使用Vue.extend()
2. 注册组件,使用Vue.component() (全局注册和局部注册)
3. 使用组件,在Vue实例的作用范围内
<html>
<body>
<div id="app">
<!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
// 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
</html>
全局注册
<html>
<body>
<div id="app1">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<!--该组件不会被渲染-->
<my-component></my-component>
</body>
<script src="js/vue.js"></script>
<script>
var myComponent = Vue.extend({
template: '<div>This is a component!</div>'
})
Vue.component('my-component', myComponent)
var app1 = new Vue({
el: '#app1'
});
var app2 = new Vue({
el: '#app2'
})
</script>
</html>
局部注册
<html>
<body>
<div id="app">
<!-- 3. my-component只能在#app下使用-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
new Vue({
el: '#app',
components: {
// 2. 将myComponent组件注册到Vue实例下
'my-component' : myComponent
}
});
</script>
</html>
父组件和子组件
<html>
<body>
<div id="app">
<parent-component> </parent-component>
<!--不能这样用
<parent-component>
<child-component></child-component>
</parent-component>
-->
<!--也不能这样用
<parent-component></parent-component>
<child-component></child-component>
-->
</div>
</body>
<script src="js/vue.js"></script>
<script>
var Child = Vue.extend({
template: '<p>This is a child component!</p>'
})
var Parent = Vue.extend({
// 在Parent组件内使用<child-component>标签
template :'<p>This is a Parent component</p><child-component></child-component>',
components: {
// 局部注册Child组件，该组件只能在Parent组件内使用
'child-component': Child
}
})
// 全局注册Parent组件
Vue.component('parent-component', Parent)
new Vue({
el: '#app'
})
</script>
</html>
以上用法比较繁琐,可以使用VUE提供的语法糖.
组件语法糖
1. 使用Vue.componend()直接创建和注册组件:
// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
el: '#app1'
})
2. 在选项对象的components属性中实现局部注册：
var vm2 = new Vue({
el: '#app2',
components: {
// 局部注册，my-component2是标签名称
'my-component2': {
template: '<div>This is the second component!</div>'
},
// 局部注册，my-component3是标签名称
'my-component3': {
template: '<div>This is the third component!</div>'
}
}
})
虽然语法糖简化了组件的创建和注册,但是也有一个问题: template中拼接HTML代码比较麻烦,而且不符合JS与HTML分离的原则,好在VUE提供了两种方法解耦.
第一种:使用<script>标签
<html>
<body>
<div id="app">
<my-component></my-component>
</div>
<!--type="text/x-template"是必须的,告诉浏览器这不是一段JS脚本-->
<script type="text/x-template" id="myComponent">
<div>This is a component!</div>
</script>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
//模板id插入
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
第二种:使用<template>标签
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<!--使用<template>就不需要表明type-->
<template id="myComponent">
<div>This is a component!</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
未完待续...
