<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<my-button></my-button>
<my-button2></my-button2>
</div>
<template id="tep">
<!-- 因为一个模板内部只能有一个根元素,所以要用一个div包裹起来 -->
<div>
<p @click="fn()">{{msg}}</p>
<button @click='count++'>我的全局模板按钮点击了{{count}}次</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="vue.js"></script> -->
<script>
Vue.component('my-button',{
template:'#tep',
data:function(){
return {msg:'hello template',count:0}
},
methods:{
fn:function(){
alert('hello,template')
}
}
})
var localComponent = {
// 局部组件的方法,函数都写在这里
data:function(){
return {sum:0}
},
template:"<button @click='sum++'>我的局部模板按钮被点击了{{sum}}次</button>"
}
new Vue({
el:'#app',
// 局部组件的注册方式,记得component要加s才是局部注册
components:{
'my-button2':localComponent,
}
})
</script>
</body>
</html>
vue.js全局组件和局部组件注册方式(易懂)
最新推荐文章于 2023-06-27 13:55:37 发布