组件
- 组件 (Component) 是 Vue.js 最强大的功能之一
- 组件可以扩展 HTML 元素，封装可重用的代码
组件注册
全局注册
- Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象
- 全局组件注册后，任何vue实例都可以用
组件基础用法
<body>
<div id="example">
<!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 -->
<my-component></my-component>
<script src="js/vue.js"></script>
</div>
<script>
// 注册组件
// 1、 my-component 就是组件中自定义的标签名
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
// 创建根实例
new Vue({
el: '#example'
});
</script>
</body>
组件注意事项
- 组件参数的 data 值必须是函数，同时这个函数要求返回一个对象
- 组件模板必须是单个根元素
- 组件模板的内容可以是模板字符串
<body>
<div id="app">
<!--
4、 组件可以重复使用多次
因为data中返回的是一个对象所以每个组件中的数据是私有的
即每个实例可以维护一份被返回对象的独立的拷贝
-->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<!-- 8、必须使用短横线的方式使用组件 -->
<hello-world></hello-world>
</div>
<script src="js/vue.js"></script>
<script>
//5 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
// 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
Vue.component('HelloWorld', {
data: function() {
return {
msg: 'HelloWorld'
}
},
template: '<div>{
{msg}}</div>'
});
Vue.component('button-counter', {
// 1、组件参数的data值必须是函数
// 同时这个函数要求返回一个对象
data: function() {
return {
count: 0
}
},
// 2、组件模板必须是单个根元素
// 3、组件模板的内容可以是模板字符串
template: `
<div>
<button @click="handle">点击了{
{count}}次</button>
<button>测试123</button>
# 6 在字符串模板中可以使用驼峰的方式使用组件
<HelloWorld></HelloWorld>
</div>
`,
methods: {
handle: function() {
this.count += 2;
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
局部注册
- 只能在当前注册它的 vue 实例中使用
<body>
<div id="app">
<my-component></my-component>
</div>
最低0.47元/天 解锁文章
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
