04-Vue组件基础

最新推荐文章于 2024-07-19 10:30:06 发布

李鑫海。

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量187

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57102902/article/details/127100892

版权

04-Vue组件基础

主要内容

组件
单项数据流
反向传值
Vue脚手架安装使用
Vue-cli项目结构
Webpack相关
Props验证
Ref

组件

概念: 组件系统是 Vue 的一个重要概念，Vue允许我们将代码拆分独立成一些小型的可复用模块。这些模块就被称为组件,使用这些组件就可以构建一个大型项目。在Vue中组件分为全局组件和私有组件

组件的创建

全局组件

概念: 注册在Vue构造函数中的组件,在Vue实例任何地方任何组件中都可以使用

语法: Vue.component('组件名', {组件的配置对象})

<div id="app">
        <gec-title></gec-title>
</div>

<script>
        //全局组件,使用Vue构造函数提供的component API添加在构造函数中,在Vue实例对象的任何地方都可以使用.\
        Vue.component('gec-title', {
     
            // 这里的配置选项与Vue实例对象的配置选项(除了没有el以外)基本相同
            // template 模板配置选项,Vue实例配置选项中也有此选项
            // 当前组件/vue实例渲染在页面中的DOM模板
            template: `
            <div>
                <h2>{
      {12 + 8}}</h2>
                我是组件gec-title的模板
            </div>
            `
        })

        new Vue({
     
            el: '#app'
        })
</script>