系统化学习前端之Vue（vue2 组件通信）

时间：2023-06-05 11:34:03浏览次数：29

标签：Vue DOM 通信 vue2 组件页面系统化

前言

前文 vue2 基础中聊过，页面本质是 DOM 树，而在vue2 中组件 = vm 实例对象 = DOM。因此，页面其实也是组件树构成，组件之间形成父子关系，兄弟关系等，相互之间通信也是组件树的必须要求。

vue2 组件通信

组件通信即组件之间的数据传递。

props 和 $emit

$attrs 和 $listener

$parent 和 $children

$refs

inject/provide

eventBus

vuex

后记

标签：Vue,DOM,通信,vue2,组件,页面,系统化
From： https://www.cnblogs.com/huangminghua/p/17457352.html

vue .js获取checkbox是否选中
1.html<divclass="weui-cellsweui-cells_checkboxfont14"v-for="iteminitems"><labelclass="weui-cellweui-check__label"><divclass="weui-cell__ftwidth-inherit"><inputtype="checkbox&q......
vue消息订阅与发布
1.点一下加号： 2.安装第三方库：（pubsub-js，实现消息发布订阅也可以用其他库） 3.从收数据的人引入库“【引入之后的pubsub是一个对象，对象身上有很多有用的方法】 4.收数据的人订阅消息：【subscribe后面两个形参，第一个为消息名，第二个才是消息内容】还需要注意订阅消息的人最......
vue前端model和data强关联
如果不关联会报错，且错误不好找！......
vue3 条件判断语句及v-if与v-show 区别
<template> <divv-if="type==='a'">aaa</div> <divv-else-if="type==='b'">bbb</div> <divv-else>ccc</div> <divv-show="flag">111</div> </template>......
vue3元素标签属性的绑定
<template> <divv-bind:id="main"v-bind:class="message">aaa</div></template><script> exportdefault{ data(){ return{ message:'active', main:'mainid' ......
Vue基础
目录一属性指令1.1属性指令使用1.2换图片小案例二style和class2.1数据的绑定2.2class的使用2.3style的使用三条件渲染四列表渲染4.1v-for显示购物车4.2v-for循环其它类型4.3key值的解释4.4数组更新与检测可以检测到变动的数组操作检测不到变动的数组操作五事件......
Vue3 模板语法学习
<template> {{message}} {{number+1}} {{ok?'yes':'no'}}</template><script> exportdefault{ data(){ return{ message:'aaa', number:10, ok:false } } }&l......
基于 Vue3 + TS 的前端结构
效果预览：1构建工具构建工具选择vite,它是一个基于原生ES模块的开发服务器，能显著提升开发体验。参考：https://cn.vitejs.dev/guide/2样式处理样式预处理器选择less重置原生样式抽离通用样式，比如flex布局、内外边距、鼠标样式等3使用svg图标使用vite-svg-l......
ant-design-vue中官网案例树穿梭框的疑问
网上：我把官网这个案例的树改成支持父节点选择之后子节点也能被选中（移除案例中的checkStrictly），但是通过父节点选择之后子节点无法取消选择了（其实已经被取消选中但是勾选状态没变）。我把handleTreeData方法去掉了，不设置disabled好像没什么问题工作中的实际问题：只需选择叶子节点，......
使用vue出现Uncaught TypeError: Vue is not a constructor错误
原因是vue2和vue3写法不对正确是<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> <scripttype="text/javascript"src="https://unpkg.com/vue@next"></s......