Vue学习记录 – 源码巴士

组件

组件的定义及复用

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

组件的定义：组件是可复用的vue实例，页面上展示的内容都可以拆分成组件，便于管理和复用
组件的复用性：组件可以重复使用，定义组件的时，data选项必须是一个函数，这样每个实例可以维护一份被返回对象的独立的拷贝，在组件复用的过程中，不会彼此影响。
组件的注册类型：全局组件（app.component）和局部组件(const 组件名 ={})
注册全局组件： app.component，全局组件，支持全局使用，即使没有调用也会一直挂载在app上，性能不高，但是使用比较简单方便。
组件的组织：通常一个应用会以一棵嵌套的组件树的形式来组织：
注册局部组件：const Hello = { template: <div>hello world</div>}局部组件定义之后（需要在Vue实例化之前），需要在父组件中（components）进行注册才可以使用，性能比较高，使用起来有些麻烦，需要做一个名字和组件间的映射对象，也可以不写，Vue底层也会自动尝试帮你做映射.

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