组件构造器和注册
vue组件的基本使用步骤和实现:
-
组件的使用分为三个步骤:
-
1.创建组件构造器
2.注册组件
3.使用组件
<body>
<div id="app">
<my-a></my-a>
</div>
<script type="text/javascript">
const a=Vue.extend({
template: '<div><h2>我是使用组件创建出来的</h2></div>'
});
Vue.component('my-a',a);
new Vue({
el: '#app'
})
</script>
</body>
调用Vue.extend()方法创建的是一个组件构造器,通常在创建组件构造器时传入template代表我们自定义组件的模板,该模板就是在使用到组件的地方要显示的HTML代码
调用Vue.component()是将组件构造器注册为一个组件,并且给它起一个组件的标签名称。所以需要传递两个参数:1. 注册组件的标签名 2. 组件构造器
全局组件和局部组件
全局组件:
<body>
<div id="app">
<my-a></my-a>
</div>
<div id="app2">
<my-a></my-a>
</div>
<script type="text/javascript">
const a=Vue.extend({
template: '<div><h2>我是使用组件创建出来的</h2></div>'
});
//这是注册的全局组件(在网页什么地方都能使用)
Vue.component('my-a',a);
new Vue({
el: '#app'
})
new Vue({
el: '#app2'
})
</script>
</body>
局部组件:
在vue对象里使用components属性定义私有组件
<body>
<div id="app">
<mya></mya>
</div>
<div id="app2">
<mya></mya>
</div>
<script type="text/javascript">
const a=Vue.extend({
template: '<div><h2>我是使用组件创建出来的</h2></div>'
});
new Vue({
el: '#app',
components:{
mya:a
}
});
new Vue({
el: '#app2'
})
</script>
</body>
父组件和子组件
父组件和子组件
<body>
<div id="app">
<par></par>
</div>
<script type="text/javascript">
const son=Vue.extend({
template: '<div><h2>我是子组件</h2></div>'
});
const parent=Vue.extend({
template: `
<div>
<h2>我是父组件</h2>
<sn1></sn1>
</div>
`,
components:{
sn1:son
}
});
new Vue({
el: '#app',
components:{
par:parent
}
})
</script>
</body>
注册组件的语法糖
注册全局组件的语法糖
<body>
<div id="app">
<qa></qa>
<qb></qb>
</div>
<script type="text/javascript">
//第一个组件
Vue.component('qa',{template: `
<div>
<h2>我是组件qa</h2>
</div>
`});
//第二个组件
Vue.component('qb',{template: '<div><h2>我是组件qb</h2></div>'});
new Vue({
el: '#app'
})
</script>
</body>
注册局部组件的语法糖
<body>
<div id="app">
<qa></qa>
<qb></qb>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
components:{
qa:{template: `
<div>
<h2>我是组件qa</h2>
</div>
`},
qb:{template: '<div><h2>我是组件qb</h2></div>'}
}
})
</script>
</body>
组件模板抽离
- 使用script标签
<body>
<div id="app">
<qa></qa>
<qb></qb>
</div>
<script type="text/x-template" id="qa">
<div>
<h2>我是分离的模板1</h2>
</div>
</script>
<script type="text/x-template" id="qb">
<div>
<h2>我也是分离的模板2</h2>
</div>
</script>
<script type="text/javascript">
new Vue({
el: '#app',
components:{
qa:{template: "#qa"},
qb:{template: "#qb"}
}
})
</script>
</body>
现在写法注意的是分离模板用script标签的类型是text/x-template,id和template对应,如下图所示:
- 使用template标签
<body>
<div id="app">
<qa></qa>
<qb></qb>
</div>
<template id="qa">
<div>
<h2>我是使用template标签分离的模板1</h2>
</div>
</template>
<template id="qb">
<div>
<h2>我也是使用template标签分离的模板2</h2>
</div>
</template>
<script type="text/javascript">
new Vue({
el: '#app',
components:{
qa:{template: "#qa"},
qb:{template: "#qb"}
}
})
</script>
</body>