Vue_qf （7）- 组件

一角残叶

于 2020-08-26 17:02:11 发布

阅读量204

点赞数

分类专栏： # 15-2 Vue_qf 文章标签： vue 组件

本文链接：https://blog.csdn.net/u012292754/article/details/108241886

版权

15-2 Vue_qf 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1 虚拟 dom_diff

在这里插入图片描述

把树按照层级分解
同 key 值对比
同组件对比

2 组件

扩展 html 元素，封装可重用的代码

2.1 组件注册方式

全局组件：Vue.component
局部组件

2.2 组件编写方式和 Vue 实例的区别

自定义组件需要有一个root element
父子组件的data是无法共享
组件可以有data，methods,computed…,但是data 必须是一个函数

2.2.1 全局组件

<body>
<div id="app">
    <navbar>

    </navbar>
</div>

<script>

    // 1.全局定义组件（作用域隔离）
    Vue.component("navbar", {
        template: `
            <div>
                <button @click="handleHome()">主页</button>
                导航栏
                <button>返回</button>
            </div>
        `,
        methods: {
            handleHome(){
                console.log("返回主页")
            }
        }
    })

    var vm = new Vue({
        el: "#app", // vue 开始渲染的地方
        data: {},
        methods: {},
    })

</script>
</body>

2.2.2 局部组件

在这里插入图片描述

<body>
<div id="app">
    <navbar></navbar>
    <sidebar></sidebar>
</div>

<script>

    // 1.全局定义组件（作用域隔离）
    Vue.component("navbar", {
        template: `
          <div>
          <button @click="handleHome()">主页</button>
          导航栏
          <button>返回</button>

          <child></child>
          <navbarchild></navbarchild>
          </div>
        `,
        methods: {
            handleHome() {
                console.log("返回主页")
            }
        },
        // 局部定义组件
        components: {
            navbarchild: {
                template: `
                    <div> navbarchild组件 - 局部组件,只能在 navbar 组件中使用</div>
                    `
            }
        }
    })

    Vue.component("child", {
        template: `
           <div>child 组件 - 全局定义</div>
        `
    })

    Vue.component("sidebar", {
        template: `
           <div>sidebar 组件 - 全局定义
            <child></child>
           </div>
        `
    })

    var vm = new Vue({ // root Component
        el: "#app",
        data: {},
        methods: {},
    })

</script>
</body>

在这里插入图片描述

一角残叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_qf （7）- 组件

1 虚拟 dom_diff把树按照层级分解同 key 值对比同组件对比2 组件扩展 html 元素，封装可重用的代码2.1 组件注册方式全局组件：Vue.component局部组件2.2 组件编写方式和 Vue 实例的区别自定义组件需要有一个root element父子组件的data是无法共享组件可以有data，methods,computed…,但是data 必须是一个函数2.2.1 全局组件<body><div id="a
复制链接

扫一扫