vue组件定义、组件的切换、组件的通信、渲染组件的几种方式（标签、路由、render）...

2024-05-14 16:40:38

vue中全局的概念是什么？---就是全局定义的功能，所有实例化的vm都可以使用， 全局定义的是挂在构造函数Vue上面的，所以实例化出的对象都可以使用这个功能

1、什么是组件？---从UI的角度把页面拆分成不同的部分，组件的优势：可复用，能够拆分vue实例代码，保证代码的可读性

　

　　模块化和前端组件化的区别：一个是从功能上拆分一个是从ui角度去拆分

2、定义vue组件

　　全局组件定义的3种方式

　　

　　

　　私有组件的定义

　　　　使用的是components来定义私有组件

　　　　

3、组件中的data

　　　　

　　　　

4、组件的切换

　　　

　　　　上面的v-if 和 v-else 切换有缺陷：只能切换2个，要是3个或以上，就切换不了了

　　　　改造：如下

　　　　

　　　　

　　　　组件切换的动画

　　　　

　5、组件之前的传值问题

　　　　

　　　　

　　　　正确用法：

　　　　

　　　　

　　　　注意：props数组里的值都是从父组件里传递过来的，只能是小写，只读不可改

　　　

　　　　父组件向子组件传递事件---注意传递的是方法不是方法的结果，所以不要小括号

　　　　

6、复习

　　

7、本地存储案例----评论列表的存和取

　　

　　

8、$refs的使用---this.$refs.xxx 获取dom节点（获取的是dom对象，原生js对象）

　　

　　

9、用render函数渲染组件

　　

　　

　　

　　

　　

　　

　　

转载于:https://www.cnblogs.com/yangyutian/p/11048145.html

vue组件定义、组件的切换、组件的通信、渲染组件的几种方式（标签、路由、render）...相关推荐

vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
从一个视图控制器切换到另一个视图控制器的几种方式
从一个视图控制器切换到另一个视图控制器的几种方式 1,模态(modal)画面的显示方法: 例如iphone通讯录管理程序中,追加新的通讯纪录时,就是使用这种模态画面例:点击一个按钮,进入另一个界面 ...
vue组件之间通信（传值）---8种方式
Vue组件之间的通信方式(个人理解) props(父传子) //父组件 parent.vue<template>//子组件<child-com :num="num" ...
uniapp滑动切换tab标签_Web前端，Tab切换，缓存，页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略)/ ...
angular cli 切换 css_漫谈 Angular 定制主题的四种方式
主题定制是提升用户体验最常见的一种,前端框架众多,主题定制方式却异曲同工,下面来介绍一下 Angular 中实现主题定制的四种方式. 1. webpack loader React 版本的 Ant D ...
Android开发关于避免切换主题时免闪屏的几种方式
Android开发关于避免切换主题时闪屏的几种方式在activity中调用setTheme来切换夜间模式的方法可能大家有看过相关的文章了,但是调用setTheme设置的主题后界面并没有变化,这时需 ...
c语言定义不定长数组初始化_C语言数组初始化的三种方式
1.{0} 初始化 int arr1[3] = {0}; 使用 {0} 的方式最简洁,一般在定义的时候使用. 2.for 循环初始化 int arr2[3]; for (int i = 0; i &l ...
Spring框架学习day_02:组件扫描 / 注解内部读解 / 组件扫描中配置作用域和生命周期 / 解耦 / 自动装配(两种方式) / 读取文件
1. 组件扫描首先,必须让Spring扫描组件所在的包,并且,组件类的声明之前必须添加@Component注解! 其实,除了@Component注解以外,还可以使用以下注解实现同样的效果: @Con ...
Vue指令v-for之遍历输出JavaScript数组，json对象的几种方式
定义数据: <script>new Vue({el:"#test",data:{message:"infor",list:["a" ...
前端学习（1964）vue之电商管理系统电商系统之渲染分类参数的tab页标签
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

最新文章

热门文章