目标&＃xff1a;
- 以button按钮为例&＃xff0c;学习如何封装&＃xff08;与具体项目无关的组件–vant&＃xff09;及使用公共组件
知识点:
- Vue.component() – 定义全局组件
- Vue.use() – 使用插件
全局组件和局部组件
局部组件
-
绝大多数vue项目就只有一个实例(new Vue()只运行一次)&＃xff0c;即:一个项目就只有一个vue实例
-
我们前面写组件一般都是直接写在vue实例中的&＃xff0c;也就是局部组件
-
这个组件不能在另一个项目中使用&＃xff08;复制粘贴代码不算哈&＃xff09;。
-
典型使用格式&＃xff1a;
import XXX from "./xxx/index.vue"
{data(){}components:{// 你的组件XXX}
}
全局组件
- 组件在所有的vue实例中的都可以使用。
- 与具体的vue项目无关&＃xff0c;最典型的体现是ui框架(element-ui, ant-design, i-view, vant)
在使用van-button时&＃xff0c;并没有去import, components: {…} 去写&＃xff0c;而是直接在视图中使用
用Vue.component创建全局组件
Vue.component
Vue.component(id,definition)
-
参数&＃xff1a;
{string} id{Function | Object} [definition]
-
用法&＃xff1a;
注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
// 注册组件&＃xff0c;传入一个扩展过的构造器
Vue.component(&＃39;my-component&＃39;, Vue.extend({ /* ... */ }))// 注册组件&＃xff0c;传入一个选项对象 (自动调用 Vue.extend)
Vue.component(&＃39;my-component&＃39;, { /* ... */ })// 获取注册的组件 (始终返回构造器)
var MyComponent &＃61; Vue.component(&＃39;my-component&＃39;)
-
参考&＃xff1a;组件
示例代码
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle>
head>
<body><div id&＃61;"app"><my-button>my-button><hr><com1>com1>div><div id&＃61;"app2"><my-button>my-button><hr><com1>com1>div><script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>Vue.component(&＃39;MyButton&＃39;, {template: &＃96;&＃96;})const com1 &＃61; {template: &＃96;局部组件
&＃96;}new Vue({el: &＃39;#app&＃39;,components: {com1}})new Vue({el: &＃39;#app2&＃39;})script>
body>
html>
以上代码中&＃xff1a;
- MyButton是全局注册的组件
- com1是局部组件
上面我们就实现了创建并使用全局组件了&＃xff0c;这是一种比较原始的方式&＃xff0c;在vue中&＃xff0c;它给我们提供另一种比较优雅的方式:Vue.use
使用Vue.use()加载插件
Vue.use()是Vue对象上的全局方法&＃xff0c;它用来把第三方插件挂载在vue上。
注意&＃xff1a;这里的Vue是大写的V。
见世面-看看别人的用法
其实&＃xff0c;在前面的学习中&＃xff0c;我们已经看过了Vue.use()了。
- vue-router
- vuex
- element-ui
- vant
Vue-Router
import VueRouter from "vue-router"
import Vue from "vue"
import Index from "../pages/index.vue"
import Headline from "../pages/headline.vue"
import Tab from "../pages/tab.vue"
import Dialog from "../pages/dialog.vue"
Vue.use(VueRouter)
export default new VueRouter({
routes: [{ name: &＃39;home&＃39;, path: &＃39;/&＃39;, component: Index },{ name: &＃39;headline&＃39;, path: &＃39;/headline&＃39;, component: Headline },{ name: &＃39;tab&＃39;, path: &＃39;/tab&＃39;, component: Tab },{ name: &＃39;dialog&＃39;, path: &＃39;/dialog&＃39;, component: Dialog }]});
element-ui的使用
https://element.eleme.cn/#/zh-CN/component/quickstart#yin-ru-element
import Vue from &＃39;vue&＃39;;
import ElementUI from &＃39;element-ui&＃39;;
import &＃39;element-ui/lib/theme-chalk/index.css&＃39;;
import App from &＃39;./App.vue&＃39;;Vue.use(ElementUI);new Vue({
el: &＃39;#app&＃39;,
render: h &＃61;> h(App)});
vant组件的库的使用
https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-san.-dao-ru-suo-you-zu-jian
import Vue from &＃39;vue&＃39;;
import Vant from &＃39;vant&＃39;;
import &＃39;vant/lib/index.css&＃39;;Vue.use(Vant);
格式
Vue.use(plugin) // Vue.use(vuex) Vue.use(vuer-router), Vue.use(vant)…
-
功能&＃xff1a;
安装 Vue.js 插件(插件&＃xff1a;理解为智能设备&＃xff1b;组件&＃xff1a;理解为手机)。
-
参数&＃xff1a;plugin。它表示要安装的插件
-
用法&＃xff1a;
如果plugin是一个对象&＃xff0c;必须提供 install 方法。如果插件是一个函数&＃xff0c;它会被作为 install 方法。install 方法调用时&＃xff0c;会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用&＃xff0c;插件将只会被安装一次。
-
参考&＃xff1a;插件
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle>
head>
<body><div id&＃61;"app"><my-button>my-button><my-headline>my-headline>div><script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>const MyButton &＃61; {install: function (Vue) {console.log(&＃39;install被执行....&＃39;, Vue)Vue.component(&＃39;MyButton&＃39;, {template: &＃96;&＃96;})}}const MyHeadline &＃61; {install: function (Vue) {console.log(&＃39;install被执行....&＃39;, Vue)Vue.component(&＃39;MyHeadline&＃39;, {template: &＃96;标题
&＃96;})}}Vue.use(MyButton)Vue.use(MyHeadline)new Vue({el: &＃39;#app&＃39;,})script>
body>
html>
注册多个组件
- 如果有多个组件&＃xff0c;则需要以一个大对象的方式给它们包起来&＃xff0c;然后在install中把它们都注册成全局组件。
- 除了组件之外&＃xff0c;还可以添加过滤器&＃xff0c;在原型对象上添加新的属性&＃xff08;例如&＃xff1a;eventBus&＃xff09;
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Document</title>
</head>
<body><div id&＃61;"app"><my-alert></my-alert><my-button></my-button>{{name | format}}<input v-focus /><button &＃64;click&＃61;"hClick">点我</button></div><script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- <script src&＃61;"https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script> --><script>const MyAlert &＃61; {template: "我是一个提示组件
"}const MyButton &＃61; {template: "我是一个MyButton组件
"}const MyEleUI &＃61; {install: function (Vue) {Vue.component(&＃39;MyAlert&＃39;, MyAlert)Vue.component(&＃39;MyButton&＃39;, MyButton)Vue.filter(&＃39;format&＃39;, function(val) {return &＃39;formated&＃39; &＃43; val})Vue.directive(&＃39;focus&＃39;, {inserted: function (el) {el.focus()}})Vue.prototype.$version &＃61; "1.0.0"Vue.prototype.$alert &＃61; function(msg) {alert(&＃39;系统提示&＃39; &＃43; msg)}}}Vue.use(MyEleUI) const vm1 &＃61; new Vue({el: &＃39;#app&＃39;,data: {name: &＃39;小王&＃39;},methods: {hClick () {alert(this.$version)this.$alert(&＃39;click&＃39;)}}})</script>
</body>
</html>
小结
e.$alert &＃61; function(msg) {
alert(‘系统提示’ &＃43; msg)
}
}
}
Vue.use(MyEleUI) // 扩展了Vue的功能const vm1 &＃61; new Vue({el: &＃39;#app&＃39;,data: {name: &＃39;小王&＃39;},methods: {hClick () {alert(this.$version)this.$alert(&＃39;click&＃39;)}}
})
&＃96;&＃96;&＃96;
小结
vue开发公共组件需要用到Vue.use()和Vue.component()两个api。
京公网安备 11010802041100号