AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【轻松入门vue】vue组件化开发

2022-07-20 120
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 二、vue组件化开发（轻松入门vue）Vue组件化开发五、组件化开发1. 组件注册组件命名规范组件注册注意事项全局组件注册局部组件注册2. Vue调试工具下载3. 组件间数据交互父组件向子组件传值props传递数据原则：单向数据流。子组件向父组件传值非父子组件之间传值4. 组件插槽基本用法具名插槽用法作用域插槽组件化思想：标准、分治、重用、组合组件 (Component) 是 Vue.js...
  • 组件化思想：标准、分治、重用、组合
  • 组件 (Component) 是 Vue.js 最强大的功能之一
  • 组件可以扩展 HTML 元素，封装可重用的代码

五、组件化开发

1. 组件注册

官方强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

组件命名规范
  1. 当使用 短横线分隔命名定义一个组件时，你也必须在引用这个自定义元素时使用短横线分隔命名例如：
Vue.component('my-component-name', { /* ... */ })
<my-component-name>
  1. 当使用 首字母大写命名定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用（在组件模板内容中）直接在dom中依旧只能使用短横线分割的形式。
Vue.component('MyComponentName', { /* ... */ })
<my-component-name>或者<MyComponentName>
组件注册注意事项
  1. data必须是一个函数

data使用函数会形成一个闭包的环境，保证每个组件的数据是独立的。

Vue.component('button-counter',{
        //组件中需要的数据
       data: function () {
           return{
               count:0
           }
       },
        //组件模板内容
        template:`
            <div>
                <button @click='handel'>点击了{{count}}次</button>
                <button>确定</button>
            </div>
        `,
        methods:{
           handel:function () {
               this.count+=2;
           }
        }
    });
  1. 组件模板内容必须是单个根节点的元素
<!--错误-->
<button @click='handel'>点击了{{count}}次</button>
<button>确定</button>
<!--正确-->
<div>
    <button @click='handel'>点击了{{count}}次</button>
    <button>确定</button>
</div>
  1. 组件模板内容可以是模板字符串（ES6语法需要浏览器支持）

当模板很长的时候使用字符串形式代码将会十分繁杂

//组件模板内容
template:"<div>\n" +
    "\t<button @click='handel'>点击了{{count}}次</button>\n" +
    "\t<button>确定</button>\n" +
    "</div>",

vue提供模板字符串形式，在模板外部加上反引号

//组件模板内容
template:`
    <div>
        <button @click='handel'>点击了{{count}}次</button>
        <button>确定</button>
    </div>
`,
全局组件注册

注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

Vue.component('组件名称', {
    data:组件数据(必须是一个函数),
    template:组件模板内容
});

demo

<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script>
        //组件注册
        Vue.component('button-counter',{
            //组件中需要的数据
           data: function () {
               return{
                   count:0
               }
           },
            //组件模板内容
            template:"<button @click='handel'>点击了{{count}}次</button>",
            methods:{
               handel:function () {
                   this.count+=2;
               }
            }
        });
        var vue = new Vue({
            el:"#app",
            data:{

            },
        })
    </script>
</body>
局部组件注册

只能在注册他的父组件中使用

//可以通过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
//在 components 选项中定义你想要使用的组件：
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

demo

<div id="app1">
    <component-a></component-a>
</div>
<script>
    var ComponentA = {
        //组件中需要的数据
        data: function () {
            return{
                count:0
            }
        },
        //组件模板内容
        template:`
            <div>
                <button @click='handel'>点击了{{count}}次</button>
                <button>确定</button>
            </div>
        `,
        methods:{
            handel:function () {
                this.count+=2;
            }
        }
    };
    new Vue({
        el: '#app1',
        components: {
            'component-a': ComponentA,
        }
    })
</script>

2. Vue调试工具下载

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

  1. 根据官网提示信息去github下载安装

在这里插入图片描述

  1. chrome商店直接下载

在这里插入图片描述

方便的查看各组件之间的关系，能够直接清楚的看到组件中的数据

在这里插入图片描述

3. 组件间数据交互

父组件向子组件传值
  1. 组件内部通过props接收传递过来的值

props用于接收父组件传递过来的数据，是一个数组

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
  1. 父组件通过属性将值传递给子组件
<blog-post post-title="来自父组件的数据!"></blog-post>
<!--也可以是绑定的数据-->
<blog-post :post-title="post"></blog-post>

demo

<div id="app">
    <!--直接传值、注意不能用postTitle(Html大小写不敏感)-->
    <blog-post post-title="来自父组件的数据"></blog-post>
    <!--通过 v-bind 动态赋值-->
    <blog-post :post-title="postTitle"></blog-post>
</div>
<script>
    Vue.component('blog-post', {
        // 在 JavaScript 中是 camelCase 的
        props: ['postTitle'],
        data:function(){
          return{
              msg:"子组件本身的数据"
          }
        },
        template: '<h3>{{ postTitle +"----" + msg}}</h3>'
    });
    var vue =new Vue({
        el:"#app",
        data:{
            postTitle:"postTitle",
        },
    })
</script>
  1. props属性名规则

在props中使用驼峰形式，模板中需要使用短横线的形式

字符串式的模板中没有这个限制（在template模板中给子组件传值可以使用驼峰形式）

  1. props属性值类型

字符串String（略）

数值Number

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

布尔值Boolean

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

数组Array

<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

对象Object

<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>
props传递数据原则：单向数据流。

只允许父组件向子组件传递数据，不允许子组件直接操作props中的数据

子组件向父组件传值
  1. 子组件通过自定义事件向父组件传递信息
Vue.component('menu-text',{
        template:`
            <button @click="$emit('enlarge-text')">字体变大</button>
        `
    });
  1. 父组件监听子组件的事件
<menu-text @enlarge-text="handel"></menu-text>

demo

<div id="app">
    <div :style="{fontSize:fontSize+'px'}">字体</div>
    <menu-text @enlarge-text="handel"></menu-text>
</div>
<script>
    Vue.component('menu-text',{
        template:`
            <button @click="$emit('enlarge-text')">字体变大</button>
        `
    });

    var vue = new Vue({
        el:"#app",
        data:{
            fontSize:5,
        },
        methods:{
            handel:function () {
                this.fontSize+=10;
            }
        }
    })
</script>
  1. 子组件通过自定义事件向父组件传递信息
<button @click="$emit('enlarge-text',10)">字体变大</button>
  1. 父组件监听子组件的事件
<menu-text @enlarge-text="handel($event)"></menu-text>

demo

<div id="app">
    <div :style="{fontSize:fontSize+'px'}">字体</div>
    <menu-text @enlarge-text="handel($event)"></menu-text>
</div>
<script>
    Vue.component('menu-text',{
        template:`
            <button @click="$emit('enlarge-text',10)">字体变大</button>
        `
    });

    var vue = new Vue({
        el:"#app",
        data:{
            fontSize:5,
        },
        methods:{
            handel:function (val) {
                this.fontSize+=val;
            }
        }
    })
</script>
非父子组件之间传值
  1. 单独的时间中心管理组件间的通信
var hub = new Vue();// 提供事件中心
  1. 监听事件与销毁事件
// 监听事件（创建一个监听事件）
hub.$on('tom-event', (val) => {
    this.num += val;
});
//销毁事件
hub.$off('tom-event');
  1. 触发事件
// 触发兄弟组件的事件
hub.$emit('tom-event', 1);

demo

<div id="app">
    <div>父组件</div>
    <div>
        <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
</div>
<script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    // 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
        data: function(){
            return {
                num: 0
            }
        },
        template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
        methods: {
            handle: function(){
                hub.$emit('jerry-event', 2);
            }
        },
        mounted: function() {
            // 监听事件
            hub.$on('tom-event', (val) => {
                this.num += val;
            });
        }
    });
    Vue.component('test-jerry', {
        data: function(){
            return {
                num: 0
            }
        },
        template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
        methods: {
            handle: function(){
                // 触发兄弟组件的事件
                hub.$emit('tom-event', 1);
            }
        },
        mounted: function() {
            // 监听事件
            hub.$on('jerry-event', (val) => {
                this.num += val;
            });
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            handle: function(){
                hub.$off('tom-event');
                hub.$off('jerry-event');
            }
        }
    });
</script>

4. 组件插槽

父组件向子组件传递内容（模板的内容，区别去上面的数据交互）

父组件标签之间的内容会放置到子组件插槽中

基本用法

当组件渲染的时候，<slot></slot>将会被替换为“hello Vue”。插槽内可以包含任何模板代码，包括 HTML：

  1. 插槽位置
Vue.component('text-show',{
        template:`
            <div>
                <strong>莫逸风</strong>
                <slot></slot>
            </div>
        `
    });
  1. 插槽内容
<text-show>hello Vue</text-show>

demo

<div id="app">
    <text-show>
        <strong>HelloVue</strong>
    </text-show>
</div>
<script>

    Vue.component('text-show',{
        template:`
            <div>
                <strong>莫逸风</strong>
                <slot></slot>
            </div>
        `
    });

    var vue = new Vue({
        el:"#app",
        data:{

        },
    })
</script>
  1. 编译作用域

hello访问的是app实例中的数据，而不是text-show中的数据

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

<div id="app">
    <text-show>
        <strong>{{hello}}</strong>
    </text-show>
</div>
  1. 后备内容

在子组件中solt标签中添加默认内容

<slot>默认</slot>

插槽无内筒显示默认内容

<text-show></text-show>    <!--显示“默认”-->

插槽有内容覆盖默认内容

<text-show>莫逸风</text-show>    <!--显示“莫逸风”-->
具名插槽用法
自 2.6.0 起有所更新。已废弃的使用 slot attribute 的语法在 这里。
  1. 插槽定义

一个不带 name 的 slot 出口会带有隐含的名字“default”。

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
  1. 插槽内容

我们可以在一个 <template> 元素上使用 v-slot 指令，其参数对应插槽name

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

demo

<div id="app">
    <base-layout>
        <template v-slot:header>
            <h1>Here might be a page title</h1>
        </template>

        <p>A paragraph for the main content.</p>
        <p>And another one.</p>

        <template v-slot:footer>
            <p>Here's some contact info</p>
        </template>
    </base-layout>
</div>
<script>

    Vue.component('base-layout',{
        template:`
            <div class="container">
              <header>
                <slot name="header"></slot>
              </header>
              <main>
                <slot></slot>
              </main>
              <footer>
                <slot name="footer"></slot>
              </footer>
            </div>
        `
    })

    var vue =new Vue({
        el:"#app",
        data:{

        },
    })
</script>
作用域插槽
自 2.6.0 起有所更新。已废弃的使用 slot-scope attribute 的语法在 这里。

有时让插槽内容能够访问子组件中才有的数据是很有用的。

  1. 插槽定义

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 slot 元素的一个 attribute 绑定上去

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
  1. 插槽内容

绑定在 <solt> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

demo

<div id="app">
    <current-user :user="user">
        <template v-slot:default="slotProps">
            {{ slotProps.bindUser.firstName }}
        </template>
    </current-user>
    <current-user :user="user"></current-user>
</div>
<script>
    Vue.component('current-user',{
        props: ['user'],
        template:`
            <span>
              <slot v-bind:bindUser="user">
                {{ user.lastName }}
              </slot>
            </span>
        `
    })

    var vue = new Vue({
        el:"#app",
        data:{
            user:{
                firstName:"莫",
                lastName:"逸风",
            }
        }
    })
</script>
文章标签：
JavaScript
Web App开发
关键词：
vue组件化VUE.js
组件化VUE.js
组件化开发VUE.js
vue组件化开发VUE.js
入门VUE.js
莫逸风
目录
相关文章
程序员彭于晏
|
17天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
19 1
九月天空
|
17天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
19 1
程序员彭于晏
|
17天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
30 0
程序员彭于晏
|
17天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
25 0
大树营养快线
|
19天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
20 2
雨溪-yuxi
|
20天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
23 1
vue学习第一章
雨溪-yuxi
|
20天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
22 1
vue学习第三章
雨溪-yuxi
|
20天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
35 1
vue学习第四章
雨溪-yuxi
|
20天前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
21 1
vue学习第7章(循环）
雨溪-yuxi
|
20天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
28 1
vue学习第九章(v-model)

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    VUE上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function
  • 3
    VueJS && ReactJS 如何？听听别人怎么说。
  • 4
    基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象，就可以渲染出一个页面(表单+表格))
  • 5
    中文代码示例之Vuejs入门教程(一)
  • 6
    vue之webpack打包原理和用法详解
  • 7
    新建Vue项目
  • 8
    Vue3+Vite4+Naive-UI 项目自动导入API和组件
  • 9
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 10
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 1
    使用Vue.js构建交互式前端的技术探索
    87
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    158
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    127
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    137
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    170
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    100
  • 7
    vue3中使用动态组件
    97
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    134
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    71
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    115

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月