2.10. Vue3 component

发布时间 ： 2025-10-25 13:33:35 UTC      

Page Views: 10 views

Component (Component) is Vue.js one of the most powerful functions.

Components can extend HTML elements to encapsulate reusable code.

The component system allows us to build large applications with independently reusable widgets, and the interface of almost any type of application can be abstracted into a component tree:

Image0

Every one of them. Vue applications are all done by using the createApp function, passed to the createApp is used to configure the root component When we mount the application, this component is used as the starting point for rendering.

An application needs to be mounted into a DOM element.

For the following example, we will Vue the application is mounted to < div id= “app” > < / div > and should be passed in #app :

const RootComponent = { /* option */ } const app = Vue.createApp(RootComponent) const vm = app.mount('#app')

The syntax for registering a global component is as follows:

const app = Vue.createApp({...}) app.component('my-component-name', { /* ... */ })

my-component-name is the component name /\* ... \*/ the part is the configuration options. After registration, we can invoke the component in the following ways:

<my-component-name>my-component-name>    
 A simple   Vue   an example of a component: 
 
 
  2.10.1.  Global component instance  
 
 Register a simple global component   runoob   and use it: 
 
 
 
<divid="app"><runoob>runoob>div><script>// Create a Vue application const app = Vue.createApp({}) // Define a new global component called runoob app.component('runoob', { template: '
Custom Components!
' }) app.mount('#app')script>    
 Next, let’s register another one.   button-counter   component, after each click, the counter will be added by 1: 
 
 
 Example  
 
 
 
// Create a Vue application const app = Vue.createApp({}) // Define a new global component called button counter app.component('button-counter', { data() { return { count: 0 } }, template: \` \` }) app.mount('#app')  
 
 
 
 Note:   template   is a back quotation mark, not just a quote’. 
 
  
 
  2.10.2.  Reuse of components  
 
 You can reuse the component any number of times: 
 
 
 Example  
 
 
 
<div id="components-demo"> <button-counter>button-counter> <button-counter>button-counter> <button-counter>button-counter> div>      
 
  2.10.3.  Global component  
 
 In the above examples, our components only pass through the   component   globally registered. 
 
 Globally registered components can be created later in the   app   used in the instance template, and also in the templates of all subcomponents in theroot instance component tree. 
 
 
 
  2.10.4.  Global component instance  
 
 Register a simple global component   runoob   and use it: 
 
 
 
<divid="app"><runoob>runoob>div><script>// Create a Vue application const app = Vue.createApp({}) // Define a new global component called runoob app.component('runoob', { template: '
Custom Components!
' }) app.mount('#app')script>     
 
  2.10.5.  Local component  
 
 Global registration is often not ideal. For example, if you use something like   webpack   in such a build system, registering all components globally means that even if you no longer use a component, it will still be included in your final build result. This has resulted in an unnecessary increase in the number of JavaScript downloaded by users. 
 
 In these cases, you can define components through a normal JavaScript object: 
 
 
 
const ComponentA = { /* ... */ } const ComponentB = { /* ... */ } const ComponentC = { /* ... */ } 
 
 
 
 And then in   components   option to define the components you want to use: 
 
 
 
const app = Vue.createApp({ components: { 'component-a': ComponentA, 'component-b': ComponentB } }) 
 
 
 
 For   components   each attribute in the object, the attribute name is the name of the custom element (component-a, component-b), and the attributevalue is the component’s option object (ComponentA, ComponentB). 
 
 We can also register the local component in the instance option so that the component can only be used in this instance: 
 
 
 
  2.10.6.  Local component instance  
 
 Register a simple local component   runoobA   and use it: 
 
 
 
<divid="app"><runoob-a>runoob-a>div><script>var runoobA = { template: '
Custom Components!
' } const app = Vue.createApp({ components: { 'runoob-a': runoobA } }) app.mount('#app')script>     
 
  2.10.7.    Prop    
 
   prop   is a custom property that the child component uses to accept the data passed by the parent component. 
 
 The data of the parent component needs to be passed through the   props   pass data to the subcomponent, which needs to explicitly use the   props   option declaration “prop”: 
 
 
 Prop instance  
 
 
 
    
<p>  By default, a component can have any number of  <code class="docutils literal notranslate">  <span class="pre">  prop  </span>  </code>  any value can be passed to any  <code class="docutils literal notranslate">  <span class="pre">  prop  </span>  </code>  . </p> 
 
  
 
 
  2.10.8.  Dynamic Prop  
 
 Similar to using the   v-bind   bind the HTML attribute to an expression, or you can use the   v-bind   dynamic binding   props   into the data of the parent component Whenever the data of the parent component changes, the change is also transmitted to the child component: 
 
 
 Prop instance  
 
 
 
      
 
  2.10.9.  Prop verification  
 
 Component can be a   props   specify validation requirements. 
 
 In order to customize   prop   can use the verification method for   props   provides an object with validation requirements rather than an array of strings. For example: 
 
 
 
Vue.component('my-component', { props: { // Basic type check (`null` and `undefined` will pass any type of verification) propA: Number, // Multiple possible types propB: [String, Number], // Required string propC: { type: String, required: true }, // Numbers with default values propD: { type: Number, default: 100 }, // Objects with default values propE: { type: Object, // The default value of an object or array must be obtained from a factory function default: function () { return { message: 'hello' } } }, // Custom validation function propF: { validator: function (value) { // This value must match one of the following strings return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } }) 
 
 
 
 When   prop   validation fails, Vue (the build of the development environment) will generate a console warning. 
 
   type   can be the following native constructor: 
 
     
  •  
       String   
     
    •  
  •  
       Number   
     
    •  
  •  
       Boolean   
     
    •  
  •  
       Array   
     
    •  
  •  
       Object   
     
    •  
  •  
       Date   
     
    •  
  •  
       Function   
     
    •  
  •  
       Symbol   
     
    •  
 
   type   can also be a custom constructor, using the   instanceof   test. 
 
 
 

                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            2.10. Vue3 component 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289