Divide the page into small, reusable components as much as possible in the build project.
Steps for usage
1. Construct a global component (but must be used in the element mounted by the instance)
-
Create the component constructor Vue.extend(), the parameter passed inside is the object containing the component options
-
const cpnC = Vue.extend({ template:``, components:{ } //括号里为子组件 })
-
-
Register the component Vue.component(cpn,cpnC) and name the template in the constructor cpn (namely the name of the tag)
-
Use components
Second, syntactic sugar to register global components
About to merge in one or two steps:
Vue.component('cpn',{
//内部会帮你用extend
template:``,
props:[]/{
},
components:{
}
})
Third, the separate writing of the template
<script type="text/x-template" id="cpn">
<div></div>
</script>
<script>
Vue.component('cpn',{
template:'#cpn'
})
</script>
<template id="cpn">
<div></div>
</template>
<script>
Vue.component('cpn',{
template:'#cpn'
})
</script>