Vue的全局注册和局部注册
作者：互联网
Vue的全局注册和局部注册
1.Vue 全局注册
-
全局注册的组件，可以用在所有的 Vue 实例 (
new Vue) 中。 -
语法:
# 第一种方式 Vue.component('组件名称', { /* ... */ }) # 第二种方式 Vue.component('组件名称', 组件对象); -
定义组件名:
-
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如
<my-component-name>。 -
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说
<my-component-name>和<MyComponentName>都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
-
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs定义组件</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<my-button></my-button>
<my-button></my-button>
<my-button></my-button>
</div>
<script type="text/javascript">
//定义组件
const MyButton = {
//渲染模版
template : `<button @click="calc()">你点击了: {{num}}次！</button>`,
//组件数据（必须是一个函数）
data: function () {
return{
num: 1
}
},
//组件属性
props: {
},
//计算属性
computed: {
},
//方法
methods: {
calc: function () {
this.num++;
}
},
//监控属性
watch: {
},
//生命周期钩子
created(){
}
};
Vue.component("MyButton",MyButton);
// 创建Vue实例
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
}
});
</script>
</body>
</html>
2.Vue 局部注册
局部注册的组件，只能在当前的Vue实例中可以使用。
语法
// 局部注册组件(只有当前vue实例可以用)
components : {
"my-button" : MyButton
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs定义组件</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<my-button></my-button>
<my-button></my-button>
<my-button></my-button>
</div>
<script type="text/javascript">
// 定义组件
const MyButton = {
// 渲染模板
template : `<button @click="calc()">你点击了: {{num}}次！</button>`,
// 组件数据 (必须是一个函数)
data : function () {
return {
num: 1
}
},
// 组件属性
props : {
},
// 计算属性
computed : {
},
// 方法
methods : {
calc : function () {
this.num++;
}
},
// 监控属性
watch : {
},
// 生命周期钩子
created (){
}
};
// 创建Vue实例
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
},
// 局部注册组件(只有当前vue实例可以用)
components : {
"my-button" : MyButton
}
});
</script>
</body>
</html>
效果
Memorial Day is 509 days |
标签：Vue,component,MyButton,num,注册,组件,全局 来源： https://blog.csdn.net/weixin_42914989/article/details/113920783