Vue2.0 梳理系列 | 组件化通信

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量121 收藏
点赞数
文章标签： vue js html javascript dom

Vue 相关知识梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

从1989年 Tim 发明了超文本标记语言 HTML 开始，前端的发展就此开始了。从开始的静态网页，再到 ASP、JSP 和 PHP 等创建动态 HTML 方式的诞生，之后是 JavaScript的加入，JavaScript 操作 HTML，JQuery 的诞生。从 MVC 模式演变到 MVVM框架模式等等，前端在悄无声息间茁壮成长。

2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed。2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。2014.01.24，Vue 正式对外发布，版本号是 0.8.0。

2015.10.26，vue-router、vuex、vue-cli 相继发布，标志着 Vue 从一个视图层库发展为一个渐进式框架。2016.10.01，Vue 2.0 发布，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

本系列旨在梳理 Vue 2.0 相关知识，接下来让我们一起Vue的旅途吧！

组件化的使用

  • 创建组件构造器 vue.extend() 

调用 vue.extend() 创建的是一个组件构造器。通常在创建组件构造器时，传入 template 代表我们自定义组件的模板。该模板就是在使用到组件的地方，要显示的HTML代码。

  • 注册组件 vue.component()

调用 vue.component() 是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。（ 所以需要传递两个参数：注册组件的标签名和组件构造器。）

  • 使用组件（全局组件）

<body>
    <div id="app">
    //3.使用组件
        <my-cpn></my-cpn>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
    //1.创造组件构造器对象
        const cpnC = Vue.extend({
            template:  //模板 
                <div>
                    <h2>title</h2>
                    <p>哈哈哈哈哈哈</p>
                    <p>嘎嘎嘎嘎嘎</p>
                </div>
        });
    //2.注册组件：此组件为全局组件(组件标签名,组件构造器
        Vue.component('my-cpn',cpnC)
            let app = new Vue({
                el: '#app'
        })
</script>
</body>

局部组件

局部组件（只能在当前vue实例中使用）。

全局组件（可以再多个vue的实例下使用）。

<body>
<div id="app">
    //3.使用组件
    <my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
    //1.创造组件构造器对象
    const cpnC = Vue.extend({
        template:  //模板 
            <div>
                <h2>title</h2>
                <p>哈哈哈哈哈哈</p>
                <p>嘎嘎嘎嘎嘎</p>
            </div>
    });
    //2.注册组件--此组件为局部组件
   let app = new Vue({
       el: '#app',
       components:{
     <!--cpn使用组件时的标签名-->
        cpn:cpnC
       }
   })
</script>
</body>

组件语法糖注册

省去了调用 Vue.extend() 的步骤，而是可以直接使用一个对象来代替。

 <!--注册全局组件语法糖-->
Vue.component('my-cpn',{   <!--my-cpn组件标签名-->
    template:        //模板
        <div>
            <h2>lalalala</h2>
            <p>哈哈哈哈哈哈</p>
            <p>嘎嘎嘎嘎嘎</p>
        </div>                                               
})

 <!--注册局部组件语法糖-->
components: {
    'my-cpn':{  <!--my-cpn组件标签名-->
        template:   //模板
            <div>
                <h2>lalalala</h2>
                <p>哈哈哈哈哈哈</p>
                <p>嘎嘎嘎嘎嘎</p>
            </div>
    }
}

组件模板的分离写法

将 HTML 分离出来写，然后挂载到对应的组件上，使结构清晰。

  • 使用<script>标签

  • 使用<template>标签

<body>
 <!--方法1：使用<script>标签-->
    <div id="app">
        <my-cpn></my-cpn>
    </div>
<script type='text/x-temolate' id="myCpn">
    <div>
        <h2>lalala</h2>
        <p>哈哈哈哈哈哈</p>
    </div>
</script>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        components: {
            'myCpn': {
            template: '#myCpn'
            }
        }
    })
</script>
</body>

<<body>
 <!--方法2：使用<template>标签-->
    <div id="app">
        <my-cpn></my-cpn>
    </div>


  <template id='myCpn'>
      <div>
          <h2>lalala</h2>
          <p>哈哈哈哈哈哈</p>
      </div>
  </template>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        components: {
            'myCpn': {
                template: '#myCpn'
            }
        }
    })
</script>
</body>

父组件和子组件

<body>
   <div id="app">
         <parent-cpn></parent-cpn>
     </div>
    <script src="../js/vue.js"></script>
    <script>
        //1.创建一个子组件构造器
        const childComponent = Vue.extend({
            template:
            <div>child子组件内容</div>
        })
        //1.创建一个父组件构造器
        const parentComponent = Vue.extend({
            template:
            <div>
                parent父组件内容
                <child-cpn></child-cpn>
            </div>
            ,
            component:{
                'child-cpn': childComponent
            }
        })
        let app = new Vue({
            el: '#app',
             components: {
               'parent-cpn': parentComponent
             }
         })
</script>
</body>

父级向子级传递 props

在组件中，使用选项 props 来声明需要从父级接收到的数据。

props 的值有两种方式：

  • 字符串数组，数组中的字符串就是传递时的名称。

  • 对象，对象可以设置传递时的类型，也可以设置默认值等。

props 选项是使用一个数组。除了数组之外，也可以使用对象，当需要对props进行类型等验证时，就需要对象写法。验证都支持的数据类型String、Number、Boolean、Array、Object、Date、Function、Symbol。

<<body>
    <div id="app">
        <cpn :cmovies="movies" :messages="message"></cpn> //传数据
    </div>
   <template id="cpn">
        <div>
            <ul>
                <li>v-for="item in cmovies"{{item}}</li>
            </ul>
            <h2>{{messages}}</h2>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
     //父传子：props
        const cpn = {
            template: '#cpn',
            props: ['cmovies' ,'messages'],//被传数据
            data() {    //data必须return
                return {}
            },
        }
        const app = new Vue({
            el: '#app',
            data: {      
                 message: '你好啊',
                 movies: ['1','2','3']
            },
            components: {    ///局部组件
                cpn  //增强写法
            }
         })
</script>
</body>

子级向父级传递 events

当子组件需要向父组件传递数据时，就要用到自定义事件。

自定义事件的流程：

  • 在子组件中，通过$emit()来触发事件。

  • 在父组件中，通过v-on来监听子组件事件。

<<body>
       <!--父组件模板-->
    <div id="app">
        //2.监听子组件事件
        <cpn @item-click="cpnClick"></cpn>
    </div>
   <!--子组件模板-->
   <template id="cpn">
        <div>
            <button v-for="item in categories"
                @click="btnClick">{{item.name}}
            </button>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
    //子组件
    const cpn = {
        template: '#cpn',
        data() {
            return {
                categories: [    //分类
                    {id:'a', name: '热门推荐'},
                    {id:'b', name: '手机数码'}
                ]
            }
        },
        methods: {
            btnClick(item){
             //1.自定义事件  触发事件(自定义事件名字,参数)
                this.$emit('item-click',item)
            }
        }
    }
  //2.父组件
    const app =new Vue({
        el: '#app',
            data: {
            message: '你好'
        },
        components: {
            cpn
        },
        methods: {
            cpnClick(item){
                console.log('cpnClick',item);
            }
        }
  })
</script>
</body>

 

父子组件的访问方式

父组件访问子组件：使用 $children 或 $refs

子组件访问父组件：使用 $parent

this.$children 是一个数组类型，它包含所有子组件对象。

$refs 针对一个子组件。

$refs 和 ref 指令通常是一起使用的。

首先，我们通过ref给某一个子组件绑定一个特定的 ID 。

其次，通过 this.$refs.ID 就可以访问到该组件了。

$refs 父传子

<body>
   <!--父组件模板-->
<div id="app">
    <cpn></cpn>
    <button @click='btnClick'>按钮</button>
</div>
   <template id="cpn">
        <div>子组件</div>
    </template>
    <script src="../js/vue.js"></script>
    <script>


    const app =new Vue({
        el: '#app',
        data: {
            message: '你好',
        },
        methods: {
            btnClick(){
                console.log(this.$children);
                //可直接调用子组件方法
                this.$children[0].showPassage()
            }
        },
        components: {
            cpn: {
                template: '#cpn',
                data(){
                    return {
                        name: '子组件name',
                    }
                }
            }
        },    
        methods: {
            showMessage(){
                console.log('showMessage');
            }
        }
    })
</script> 
</body>

$parent 子传父

子组件不能引用父组件或Vue实例的数据，用父组件将数据传递给子组件。

   <body>
   <!--父组件模板-->
   <div id="app">
    <cpn ref="aaa"></cpn>
    <button @click='btnClick'>按钮</button>
   </div>
   <template id="cpn">
        <div>子组件</div>
    </template>
    <script src="../js/vue.js"></script>
    <script>


    const app =new Vue({
    el: '#app',
    data: {
        message: '你好',
    },
    methods: {
        btnClick(){
            //$ref 对象类型，默认是一个空的对象
            console.log(this.$refs.aaa.name);
        }
    },
    components: {
        cpn: {
            template: '#cpn',
            data(){
                return {
                    name: '子组件name',
                }
            }
        }
    },    
    methods: {
        showMessage(){
            console.log('showMessage');
        }
    }
  })
</script> 
</body>

Vue 相关知识梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

葛媛

HFun 前端攻城狮

HFun TM
关注
vue组件及其通信
前端御书房
12-26 301
组件 在vue中组件是一个可复用的vue实例 创建组件的方式 全局注册 Vue.extend()创建 var coml = Vue.extend({ template:'<h1>这是全局vue组件my-coml<h1>' }); Vue.component('my-coml',coml); <div id="app"> <my-coml></my-coml> </div> Vue.component
Vue 学习 第三篇 定义组件 + 组件之间的通信
YCHH1的博客
06-07 671
组件的定义 + 组件之间的通信 + 插槽 + ref
Vue给组件绑定原生事件
Smart_J_King的博客
09-14 194
给组件绑定原生事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>给组件绑定原生事件</title> <script src="./vue.js"&g
Vue 组件及组件间的通信
上庸者-不服周
06-27 560
vue组件的使用
vue组件 组件的继承extend
m0_37068028的博客
04-05 1万+
vue组件 组件的继承 import Vue from 'vue' const component = { data () { return { text: 111 } }, props: { propOne: String }, mounted () { console.log('component1 mounted') },...
Vue2.0 项目实战篇-学不会算我的；
Java.慈祥
08-13 1349
一级路由，定义为文件夹、index.vue主页面定义在所属的一级路由目录下；——————创建文件my-app/│├── src/│ ├── router/ # 定义路由组件配置 │ │ ├── index.js│ ├── views/ # 定义路由模块页面 │ │ ├── login/ #登录模块 │ │ │ │ ├── index.vue│ │ └── layout/ #首页模块——内涵多个二级子模块;│ │ │ │ ├── 首页.vue│ │ │ │ ├── 我的.vue。
vue2.0框架
weixin_33856370的博客
12-06 257
1：vue是一套构建用户界面的渐进式框架， 特点：模块化，组件化：在vue中所有的都是组件，mvvm:双向数据绑定 适合做spa, var vm=new Vue({}) 一个vue实例有：挂载元素，数据，模版，方法，生命周期钩子 指令：v-text:绑定普通的文本，{{}}是简写方式 v-if,v-for，v-html:解析html字符串， 属性指令：&lt;img src="{{}}" clas...
Vue2.0学习小结与知识梳理（一）
Aero_K的博客
07-31 294
一、vue 主要特点：声明式，数据驱动和组件化。 声明式：注重结果，只需要关注实现的结果，而不关注实现的过程。 数据驱动：响应式的数据，即当数据改变时，vue会自动将其渲染到视图层，开发者不需手动去修改dom结构 组件化：页面是由组件构成，组件又是由数据 + 指令构成。 1、每个Vue应用都是通过Vue函数创建一个实例开始的。创建的方式有两种：全局创建和局部创建 2、实例的生命周期钩子...
Vue.js 2.0 快速上手精华梳理
栀夏暖阳的博客
02-19 424
自从Vue2.0发布后，Vue就成了前端领域的热门话题，github也突破了三万的star，那么对于新手来说，如何高效快速的学习Vue2.0呢。 Vue基础 对于没有接触过es6和webpack的童鞋来说，不建议直接用官方的脚手架vue-cli构件项目。 先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令，和整个vue实例的基础架构。 vue的...
Vue+Vuex+Element-ui实现歌曲播放控件、播放列表功能
weixin_44200288的博客
05-24 5082
写在前面： 根据思路写代码和写文章的区别还是挺大的，后者更多需要的是一个总结表述的能力，以及需要判断文章中呈现的东西是否有价值。做笔记和写博客同样是在记录，而博客还承担了一个供别人浏览的职能，所以如何把自己的逻辑表达得让大众都能理解，也是一个值得研究的地方。 由于个人技术的影响，文章中可能会出现一些错误，小到格式排版，大到逻辑错误都正常，所以写博客的原因主要是： 帮助重新梳理自己的逻辑，记录自己的学习过程 希望能与更多伙伴进行技术上的交流，如果还能大佬指出问题或提一些建议，那就是赚到 如果还能帮到一些可能
一文梳理vue面试题知识点
bb_xiaxia1998的博客
10-24 151
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。
精简vue
雙馬程序猿
10-24 1401
精简vue：1.vue概述与前端知识体系、2.前端发展史、3.了解前后分离的演变史、4.第一个Vue程序、5.基础语法指令、6.表单双绑和组件、7.Axios异步通信、8.计算属性-内容分发-自定义事件、9.第一个vue-cli项目、10.webpack使用、11.vue-router路由、12.实战快速上手
Vue
小陈学java
07-23 2016
前端体系，前后端分离 1、概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合。 2、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中“我大前端”是绕不开的一门必修课。本阶段课程的主要目的就是带领我.
【愚公系列】《AIGC辅助软件开发》011-AI辅助编写技术文档：技术文档
热门推荐
时光隧道
07-24 1万+
在当今快速发展的技术环境中，技术文档的编写变得愈加重要。无论是软件开发、产品设计，还是系统架构，清晰、准确的技术文档不仅能帮助团队成员快速理解项目，还能为用户提供必要的使用指导。然而，编写高质量的技术文档常常是一项繁琐且耗时的任务。随着人工智能技术的不断进步，AI工具的辅助作用逐渐显现，特别是在技术文档的编写过程中。借助AI，开发者和技术作家可以更高效地生成、编辑和维护文档，从而专注于更高层次的创作和思考。
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 877
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
复习HTML(基础）
m0_74124657的博客
10-01 1117
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1142
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
最新发布
wjs2024的博客
10-04 342
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
Vue2.0组件详解：父子组件通信与优势
Vue2.0的组件系统是其核心特性之一，它允许开发者将UI拆分为可复用的模块，从而提高开发效率，增强代码的可维护性和组织性。在本文中，我们将深入探讨Vue组件以及如何实现父子组件之间的通信。 首先，组件是Vue应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值