一.前言
這是自己重新寫的一個，感覺以前的太寫了很多不必要的方式 實際當中基本不會用的 所以自己寫了一個常用的組件什么方式 更加的通俗易懂
二.代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>組件練習</title>
<!-- 引入vue.js -->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{msg}} -->
<!-- 全局組件 -->
<my-div></my-div>
<!-- 局部組件 -->
<my-div2></my-div2>
<!-- //templata 注冊全局組件 -->
<clj></clj>
<!-- //templata 注冊局部組件 -->
<clj2></clj2>
</div>
<!-- //templata 注冊全局組件 -->
<template id="my-template">
<div>
我是template全局組件
</div>
</template>
<!-- //templata 注冊全局組件 -->
<template id="my-template2">
<div>
我是template局部組件
</div>
</template>
<script>
// 全局組件
Vue.component('clj',{template:"#my-template"})
Vue.component("my-div",{template:`<div>我是全局組件</div>`})
new Vue({
el:'#app',
data(){
return{
msg:'我不愛大海和森林'
}
},
//局部組件
components:{
'my-div2':{template:`<div>我是局部組件</div>`},
'clj2':{template:"#my-template2"}
}
})
</script>
</body>
</html>