個(gè)人認(rèn)為局部組件使用對(duì)象的形式，比較簡便
```
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <div id="app">
? ? ? ? <change></change>
? ? </div>
? ? <template id="nav">
? ? ? ? <div>
? ? ? ? ? ? <h1>{{message}}</h1>
? ? ? ? ? ? <button v-on:click='btn'>按鈕</button>
? ? ? ? </div>
? ? </template>
? ? <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
? ? <script>
? ? ? ? var change={
? ? ? ? ? ? template:"#nav",
? ? ? ? ? ? data:function(){
? ? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? ? message:'xxxxxx'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? btn(){
? ? ? ? ? ? ? ? ? ? if(this.message=='xxxxxx') {
? ? ? ? ? ? ? ? ? ? ? ? this.message='aaaa'
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? this.message='xxxxxx'
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? var app=new Vue({
? ? ? ? ? el:'#app',
? ? ? ? ? components:{
? ? ? ? ? ? ? change
? ? ? ? ? },
? ? ? ? })
? ? </script>
</body>
</html>
````
