Registration of components
-
By instantiating the Vue constructor function, you get a Vue instance, which we call the'root instance', which is the largest parent
-
This root instance exists as a label, so we also call it a'root component'
-
The root instance is also a component, but what we get is just a component
-
Vue.extend() is an extension of the Vue functionality, which is a component
-
Vue implements the function of Vue by Vue.extend(), which is a component
-
Think: How does Vue.extension work?
- Discovery via new Vue.extend() is as excluded as new Vue
- Components are labeled things, so I should use them like labels
- But whether it's html3 or html5, it certainly won't agree to its arbitrary tagging
- Vue compiles components into an html structure
- This process of Vue, which we call component registration
Summary:
1. Vue implements components through Vue.extend()
2. Vue components need to be registered when used
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- Can't write that -->
<!-- <HelloBoy></HelloBoy> -->
<!-- <hello-boy></hello-boy> -->
<Hello></Hello>
<hello></hello>
</div>
<div id="root">
<Hello></Hello>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
Global Registration
1. Format: Vue.component()
*/
// Const Hello = Vue.extend (options) The options we learned are available here
const Hello = Vue.extend({
template: '<div> Hello assembly </div>'
})
// Vue.component (name of component, configuration of component)
// Vue.component( 'HelloBoy', Hello )
// Vue.component( 'hello-boy', Hello )
Vue.component( 'Hello', Hello )
new Vue({
el: '#app'
})
new Vue({
el: '#root'
})
</script>
</html>
Abbreviation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- Can't write that -->
<!-- <HelloBoy></HelloBoy> -->
<!-- <hello-boy></hello-boy> -->
<Hello></Hello>
<hello></hello>
</div>
<div id="root">
<Hello></Hello>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
Global Registration
1. Format: Vue.component()
*/
// Short form of vue component registration
Vue.component( 'Hello', {
template: '<div> Hello assembly </div>'
})
new Vue({
el: '#app'
})
new Vue({
el: '#root'
})
</script>
</html>
Local registration of components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- Can't write that -->
<!-- <HelloBoy></HelloBoy> -->
<!-- <hello-boy></hello-boy> -->
<Hello></Hello>
<hello></hello>
</div>
<div id="root">
<Hello></Hello>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
Local registration is done using components selection
Local registration is only valid within the scope of the currently registered instance
*/
new Vue({
el: '#app',
components: { //Options for registering components locally
// Name of component: options for component
'Hello': {
template: '<div> Hello Here is the local registration </div>'
}
}
})
new Vue({
el: '#root'
})
</script>
</html>
Rules for using components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr is = "Hello"></tr>
</table>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
Business: Add a row to the table above, represented by a component
In the above case, it is found that components cannot be directly resolved in tags that have a direct relationship between parent and child, and problems can occur
Label for direct parent-child relationship
ul li
ol li
table tr td
dl dd dt
select
How to solve this problem?
We use the is attribute to solve the problem
*/
Vue.component('Hello',{
template: ` <tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>`
})
new Vue({
el: '#app'
})
</script>
</html>