No matter which way we create the component , In component template Attribute to the template content , There must be and only one root element , Other elements must be under this root element .
1. use Vue.extend coordination Vue.component Define global components
in use Vue.extend coordination Vue.component When defining a global component ,Vue.extend It's defined in it template Template , and
Vue.component It is to register a component .
<body> <div id="app"> <!-- The third step is to use the --> <!--
If you want to use components , Directly change the name of the component to HTML The form of tags is introduced into the page --> <my-compnent></my-compnent> </div> <script>
// The first step ： use Vue.extend To create a global component var com1 = Vue.extend({
// adopt template The properties of the template to display the html template: '<h2> use Vue.extend Create global components </h2>' });
// Step two ： use Vue.component(' Component name ', Created component template object ) Vue.component('myCompnent', com1);
// establish Vue example , obtain ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}
}); </script> </body>
【 be careful 】 When defining a registration component , Component names do not need to be named according to humps , But when a component is introduced into the page , The name of the component must be named according to the hump .
Here's a short version ：
2. Direct use Vue.component Define global components
Here is the direct use Vue.component Create a component directly
<div id="app"> <my-com2></my-com2> </div> <script> Vue.component('myCom2', {
template: '<h2> Direct use Vue.component Create component </h2>' }); // establish Vue example , obtain ViewModel var vm
= new Vue({ el: '#app', data: {}, methods: {} }); </script>
3.Vue External direct definition template
<body> <div id="app"> <my-com3></my-com3> </div> <template id="tmp1"> <div>
<h2> This is through template element , Define the structure of the component externally , There are code prompts and highlights </h2> </div> </template> <script>
Vue.component('myCom3', { template: "#tmp1" }); var vm = new Vue({ el: '#app',
data: {}, methods: {} }); </script> </body>
Technology