Vue学习记录_html-js-css

组件组件的定义及复用

<body>
    <div id="main">div>
body>
<script>
    // input,textarea,checkbox，radio
    const app = Vue.createApp({
        data() {
            return {
                message: "",
            }
        },
        template: `
            
                
                
                
                
            
                `
    })
    app.component('count-parent', {
        template: ``
    })
    app.component('count', {
        data() {
            return {
                count: 1
            }
        },
        template: `{{count}}`
    })
    const vm = app.mount("#main");
script>

组件的定义：组件是可复用的vue实例，页面上展示的内容都可以拆分成组件，便于管理和复用

组件的复用性：组件可以重复使用，定义组件的时，data选项必须是一个函数，这样每个实例可以维护一份被返回对象的独立的拷贝，在组件复用的过程中，不会彼此影响。

组件的注册类型：全局组件（app.component）和局部组件(const 组件名 ={})

注册全局组件： app.component，全局组件，支持全局使用，即使没有调用也会一直挂载在app上，性能不高，但是使用比较简单方便。

组件的组织：通常一个应用会以一棵嵌套的组件树的形式来组织：

注册局部组件：const Hello = { template: hello world} 局部组件定义之后（需要在Vue实例化之前），需要在父组件中（components）进行注册才可以使用，性能比较高，使用起来有些麻烦，需要做一个名字和组件间的映射对象，也可以不写，Vue底层也会自动尝试帮你做映射.

<body>
   <div id="main">div>
body>
<script>
   // input,textarea,checkbox，radio
   const Hello = {
       template: `hello world`
   }
   const app = Vue.createApp({
       components: {
           Hello,
       },
       data() {
           return {
               message: "",
           }
       },
       template: `
           
               
               
               
               
           
               `
   })
   app.component('count-parent', {
       template: ``
   })
   app.component('count', {
       data() {
           return {
               count: 1
           }
       },
       template: `{{count}}`
   })
   const vm = app.mount("#main");
script>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/945621.html

Vue学习记录

发表评论

评论列表（0条）