您现在的位置是:首页 > Javascript
当前栏目
组件注册
2023-04-18 16:57:01 时间
1.组件注册
1.1 全局注册
- Vue.component('组件名称', { }) 第1个参数是标签名称,第2个参数是一个选项对象
- 全局组件注册后,任何vue实例都可以用
组件基础使用
<body>
<div id="app">
<!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 -->
<button-counter></button-counter>
</div>
<script src="vue.js"></script>
<script>
// 注册组件
// 1、 button-counter 就是组件中自定义的标签名
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
// template: '<button @click="count++">点击了{{count}}次</button>',
template: '<button @click="handel">点击了{{count}}次</button>',
methods: {
handel: function () {
this.count += 2;
}
}
})
// 创建根实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>
组件注意事项
- 组件参数的data值必须是函数同时这个函数要求返回一个对象 分析函数与普通对象的对比
- 组件模板必须是单个根元素 分析演示实际的效果
- 组件模板的内容可以是模板字符串 模板字符串需要浏览器提供支持(ES6语法)
- 组件命名方式
<div id="app">
<!--
4、 组件可以重复使用多次
因为data中返回的是一个对象所以每个组件中的数据是私有的
即每个实例可以维护一份被返回对象的独立的拷贝
-->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<!-- 8、必须使用短横线的方式使用组件 -->
<hello-world></hello-world>
</div>
<script type="text/javascript">
//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>
1.2局部注册
- 只能在当前注册它的vue实例中使用
<body>
<div id="app">
<hello-world></hello-world>
<hello-tom></hello-tom>
<hello-jrreny></hello-jrreny>
<text-com></text-com>
</div>
<script src="vue.js"></script>
<script>
// 定义组件的模板
Vue.component('text-com', {
template: '<div>Text<hello-tom></hello-tom></div>' //局部组件只能在注册他的父组件中使用
})
var HelloWorld = {
data: function () {
return {
msg: 'HelloWorld'
}
},
template: '<div>{{msg}}</div>'
};
var HelloTom = {
data: function () {
return {
msg: 'HelloTom'
}
},
template: '<div>{{msg}}</div>'
};
var HelloJrreny = {
data: function () {
return {
msg: 'HelloJrreny'
}
},
template: '<div>{{msg}}</div>'
};
var vm = new Vue({
el: '#app',
data: {
},
// 局部组件注册
components: {
//将只在父模板可用 一定要在实例上注册了才能在html文件中使用
'hello-world': HelloWorld,
'hello-tom': HelloTom,
'hello-jrreny': HelloJrreny
},
methods: {
}
})
</script>
</body>
相关文章
- Nodejs中的url模块
- nodejs中的fs模块
- nodejs事件循环
- cordova与nodejs
- nodejs创建一个简单的服务器
- nodejs实现多进程
- 用 JavaScript 构建命令行应用
- autojs-ocr-easyedge-nodejs
- ES6和nodejs
- nodejs核心api-http模块
- Element 系列组件之 EColorPicker 颜色选择器组件
- 【Android】Android 封装 Http 请求工具
- 想看Vue文档,cn放错位置,误入xx网站...
- XML转换为VFP的临时表,简简单单很好用,值得收藏
- JS自定义全局Error
- 转义JavaScript特殊字符
- BeyondTrust Remote Support 6.0 跨站脚本
- WPF(C#)桌面UI控件库推荐:Newbeecoder.UI-NbGroupBox使用
- layui rate (评分组件)使用的一点经验分享
- Android Studio解决XML布局文件乱码问题