const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

export default {
  data:()=>({
    list:Object.freeze([{title:'我永遠(yuǎn)不需要改變，我不需要響應(yīng)式'}])
  })
}

export default {
  components:{
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

export default {
  components:{
    AsyncComponent:()=>({
      component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // 延遲幾毫秒，默認(rèn)200
      timeout:3000, // 加載幾毫米之后就超時(shí)，觸發(fā)error組件
      loading:LoadingComponent, // 組件未加載回來(lái)前顯示
      error:ErrorComponent // 組件超時(shí)時(shí)顯示
    })
  }
}

export default {
   haha({$attrs,$route,$store,$listeners,$ref}){
     // 還能結(jié)構(gòu)很多屬性，可自行打印康康
     return 
   }
}

    <h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

    <template v-if="status" >
        <h3 v-for="item in 100" :key="item">{{item}}</h3>
    </template>

 // 父組件
 
 template>
  <div>
    <Toggle :show.sync = 'show'></Toggle>
  </div>
</template>

//Toggle 組件

<template>
  <div>
    <div v-if="show">
    展示和隱藏組件
  </div>
  <button @click="test">隱藏組件</button>
  </div>
</template>
<script>

export default {
  props:['show'],
  methods: {
    test(){
      this.$emit('update:show',false)
    }
  }
}
</script>

<el-table 
   v-bind="$attrs"
   v-on="$listeners">
   <template v-for="item in column">
    <el-table-column v-bind="item" />
   </template>
</el-table>
<script>
export default {
  props:{
      column:{
        type:Array,
        required:true
      }
   }
}
<script>

   //lazy
   <input v-model.lazy="msg" />
   //number
   <input v-model.number="msg" />
   //trim
   <input v-model.trim="msg" />

// 父組件
<template>
  <div>
    <CustomInput v-model='msg' />
  </div>
</template>

//CustomInput

<template>
  <div>
    <input type="text" :value="value" @input="test">
  </div>
</template>
<script>
export default {
  props:['value'],
  methods: {
    test(e){
      this.$emit('input',e.target.value)
    }
  },
}
</script>

// 父組件不需改變
...
//CustomInput
<template>
  <div>
    <input type="checkbox" :checked="checked" @change="test">
  </div>
</template>
<script>
 props:['checked'],
 model:{
    props:'checked',
    event:'change'
  },
  methods: {
    test(e){
      this.$emit('change',e.target.checked)
    }
  }
}
</script>

const router = new VueRouter({
  routes:[...] ,
  scrollBehavior(to,from,position){
      // position參數(shù)可自行打印康康，點(diǎn)擊瀏覽器左右箭頭會(huì)觸發(fā)
      return{
          // 這里可以返回很多參數(shù)，下面簡(jiǎn)單列就幾個(gè)，詳情自己康康官網(wǎng)
          x:100,
          y:100,
          selector:#app,
          offset:200,
          //等等
      }
  }
})

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

<keep-alive>
    <router-view></router-view>
</keep-alive>