0

0

分享vue2.X组件的实例教程

零下一度

零下一度

发布时间:2017-07-18 17:43:59

|

1655人浏览过

|

来源于php中文网

原创

关注点:父子组件之间的通信

看图说话:

Pass Props

  • 子组件本身与父组件是孤立的,通过子组件中显示声明的props属性,接收父组件数据;

    立即学习前端免费学习笔记(深入)”;

  • 父组件的数据更新时,子组件的prop会跟着更新;

  • 此数据流动是单向的(看着);

Emit Events

  • 子组件使用$.emit(fn)向外抛出自己的内部触发的事件;

  • 父组件是否监听?如果父组件需要监听,使用v-on绑定监听,触发对应事件;

以上为通用语,具体分析

  • 子组件可以接收一个字符串,在子组件内部可以用{{label}}使用 

  • 子组件可以接收动态参数

子组件接收到数据之后想处理一下不小心改了怎么办?

  • 给prop创建一个副本(建议深拷贝),处理副本,不动prop;

父组件的数据改变后,子组件的prop会自动更新,但是这个prop的副本不会啊?

  • 使用watch监听这个prop,改变时更新副本;

子组件的prop副本改变了想要通知父组件怎么办?

  • 使用watch监听这个副本,改变时向外抛出自己的内部触发的事件;

。。。

其实以上???在2.3有了更好的方法,之前的就是看看。

.sync修饰符

***父组件***


***子组件***$.emit('update:message',newValue)

我是用了一下然后喜闻乐见的修改成功了,但是打开控制台有报错!!!

Cursor
Cursor

一个新的IDE,使用AI来帮助您重构、理解、调试和编写代码。

下载
vue.esm.js?65d7:434 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message"

 

子组件想要触发父组件可以emit(父组件需要监听才会触发),父组件触发子组件事件呢?

  • 通过在引用的子组件上使用ref属性实现父组件调用子组件的方法以及属性

但是!$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

关注点:非父子组件之间的通信

 使用空的vue实例作为中央事件总线

var bus = new Vue();// 触发组件 A 中的事件bus.$emit('id-selected', 1)// 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) {  // ...})

考虑vuex

关注点:在组件中使用slot

首先,在父组件中给子组件标签中间放置内容是无效的。然后slot出场。

白话版本:

匿名slot:
    slot标签存在与子组件template中;
    子组件在父组件中使用的时候,子组件标签中的结构会在编译后替换子组件的slot标签;
如果子组件中没有slot,则父组件中子组件标签中的内容会消失; 具名slot: 顾名思义,是具有name属性的slot标签;并有匿名组件的特性(以上); 子组件在父组件中使用的时候,子组件中的结构中会有某些标签拥有slot属性并赋值,这些会在编译后替换子组件的相应slot标签;

一句话解释:主要的内容是写在父组件中的子组件标签中,编译后插入子组件的相应位置

讲真,说到这里我自己都不明白要slot干嘛。

官方讲解入口

官方给了个布局的例子:

View Code

  

这里可能是一个页面标题

主要内容的一个段落。

另一个主要段落。

这里有一些联系信息

View Code

关注点:动态组件使用

  • 通过使用保留的  元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换:很适用于制作Tab类的效果


  
  • 在methods属性中定义一个函数修改currentView即可。

  • 视情况可以配合 keep-alive 避免重新渲染

  • 在子组件上放置activate钩子做切换时的工作:done() //放到钩子最后,表示执行工作完毕,可以切换组件,配合keep-alive使用,activate钩子只执行一次

  • 子组件接收数据和以往相同,只是这一次都写在了component中,只是如此的话,每个子组件都需要有这些接口(prop)

暂时说到这里,突然得回头看一下react,没时间了,回头会继续。

以上的满基础的(我是新手),有什么不对的求指出,感谢!!!


 

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 8.1万人学习

Webpack4.x---十天技能课堂
Webpack4.x---十天技能课堂

共20课时 | 1.4万人学习

Bootstrap4.x---十天精品课堂
Bootstrap4.x---十天精品课堂

共22课时 | 1.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号