【IMWeb训练营作业】vue.js-组件的定义及使用

来源：互联网发布：淘宝店铺滚动公告代码编辑：程序博客网时间：2024/06/07 03:55

上一篇学习了vue.js的入门,这一篇主要记录一下vue.js中组件的定义及使用。

select.html代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="./vue.js"></script></head><body><div id="app"><h2>自定义的下拉框(局部注册)</h2><custom-select></custom-select></div><div id="app1"><h2>自定义的下拉框(全局注册)</h2><custom-select></custom-select></div><script>//全局注册//注册组件,命名方法:custom-select或者customSelect,但是使用只能用custom-selectVue.component("custom-select", {props: ["btnValue"],template: `<select name="" id=""><option value="">北京</option><option value="">上海</option><option value="">武汉</option></select>`})//局部注册new Vue({el: "#app",components: {"custom-select": {template: `<select name="" id=""><option value="">北京1</option><option value="">上海1</option><option value="">武汉1</option></select>`}}})new Vue({el: "#app1"})</script></body></html>

组件的注册分为全局注册和局部注册，如果两个同时存在的话，局部注册会覆盖全局注册的组件。

前两天没看到群消息，今天才看到，太匆忙,没有加css属性，效果图如下所示。

0 0