出现问题的代码： .divcss5{ width:500px; border:1px solid #000; padding:10px } .divcss5-lf{...Paste_Image.png 解决方法： 使用clear .clear{ clear:both } <div class="divcss5
在测试小程序的时候，发现了这样的一个bug，点击子元素事件d的时候触发父元素的点击事件，从而执行父级的点击事件，跳转到了父级的点击事件的页面了。 ?...其实很简单，只需要把子级的bindtap改成catchtap，就可以了。 ? ?...因为： bind事件绑定不会阻止冒泡事件向上冒泡 catch事件绑定可以阻止冒泡事件向上冒泡 当点击子集的catchtap='navmap'事件之后阻止冒泡事件向上冒泡，所以不会触发bindtap=...'carState'，成功解决bug,实现小程序中点击子元素事件而不触发父元素的点击事件。
属性，子元素会居中，对大多数内联元素有效 使用弹性盒布局：父元素添加弹性盒，控制子元素的水平位置居中 父元素添加弹性盒（display:flex），且添加justify-content:center;和...对边界塌陷的理解 边界塌陷的概念： 父元素包裹子元素，给子元素设置margin-top，只想让子元素距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移 边界塌陷的解决办法 给父元素加边框...var不存在块级作用域，let和const存在块级作用域。 谈谈对闭包的认识 闭包的概念 一个函数访问了此函数的父级及父级以上的作用域中的变量，这个函数就是闭包。...，实例是子类的实例，也是父类的实例2、类新增原型方法和属性，子类都能访问到3、简单，易于实现 缺点：1、因为原型对象的属性是共享的，修改一个对象属性，其他对象的该属性也变了2、创建子类实例时，无法向父类构造函数传递参数...事件代理的实现 确定要添加事件元素的父级元素 给父元素定义事件，监听子元素的冒泡事件 使用event.target来定位触发事件冒泡的子元素。
1.组件属性定义 prop prop 定义了这个组件有哪些可配置的属性，可通过父组件传递进来。如果是对象类型，比如对象或数组，它的默认值必须从一个工厂函数获取。...这时，需要用watch监听组件属性，同时在组件内声明一个变量，当监听的属性发生变化时，同步修改该变量。 模板中，不要直接使用属性，而改为组件变量值。...如果是对象类型，且该对象可能包含子对象，且属性发生变更就是内部子对象变化，那么，需要用到深度监听。 那么，改造一下props: data的监听器。...很简单，Vue2.0用的是Object.defineProperties监听数据变化，而此方法不能监听到对象新增或者删除操作。 解法也很简单，在初始化组件数据时，把可能用到的子对象都定义好。...如果不更新父组件状态，那么关闭之后再次点击按钮不会触发属性变化，那么自然watch事件不会被触发。
，需要使用is来传递组件 Vue组件 全局注册/局部注册 局部注册组件在子组件中不可用 全局注册的行为必须在根Vue实例创建之前发生 camelCase的属性可以在组件中使用 kebab-case 可以以对象的模式指定每一个... props属性的类型 父级 props的更新会向下流动，反之则不行 由于JavaScript对象和数组是引用传入的，所以当子组件对props的改变将会影响到父组件 props类型校验可以是原生构造对象的中的任意一个... model属性自定义 父组件模板的所有东西都会在父级作用域内编译，子组件的所有内容都会在子组件作用域内编译 插槽( )/具名插槽( )/作用域插槽( slot/slot-scope) 组件可用来缓存被切换后隐藏的组件的状态 $root访问根实例， $parent访问父组件实例(不推荐) 父组件访问子组件...，使用 $refs属性来获取设置了 ref属性的子组件 provide属性允许我们指定要分享给后代组件使用的方法，然后后代组件使用 inject属性来获得祖先组件分享的方法(依赖注入) 事件侦听器（ $
Vue父子组件之间的通讯 一 父组件向子组件通过props传递数据 在组件中，使用选项props来声明需要从父级接收到的数据。...Vue父子组件的访问方式 如果我们不需要利用父子组件通信去交换什么数据或者信号,我们仅仅需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件,从而可以相互得到对方组件里的数据和方法,那么不必用之前的...父组件访问子组件：使用this.children或refs this. 子组件访问父组件：使用this.$parent 子组件访问根Vue实例：使用this....$root 2.2 .父组件访问子组件：使用this.$children或this....但是我们开发时候一般不建议这样使用,因为我们用组件化开发一般是为了复用,如果我们在组件内定义了调用父组件的方法,但是用在不同位置的组件有不同的父组件,这样就会出现问题了. 4 子附件访问根组件 this
CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。...2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。...3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。...解决浮动、清除浮动的方法 这里DIVCSS5为了统一讲解浮动解决方法，假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性...，两个子级再设置相同高度100px，父级css height高度暂不设置（通常为实际css布局时候这样父级都不设置高度，而高度是随内容增加自适应高度）。
下面是一个基本的示例，如果我们不提供父级的任何slot位的内容，刚父级中的内容就会作为后备内容。...这是因为我们的父组件不知道这个info对象是什么。 那么我们该如何解决呢？ 引入作用域插槽 简而言之，作用域内的插槽允许我们父组件中的插槽内容访问仅在子组件中找到的数据。...例如，我们可以使用作用域限定的插槽来授予父组件访问info的权限。...我们需要两个步骤来做到这一点： 使用v-bind让slot内容可以使用info 在父级作用域中使用v-slot访问slot属性 首先，为了使info对父对象可用，我们可以将info对象绑定为插槽上的一个属性...，仅是 info）将作为article对象的属性提供，并且我们可以轻松地更改我们的slot以显示description内容。
(vue3废弃) 适用 父子组件通信 ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 $parent / $children：访问访问父组件的属性或方法...访问根组件中的属性或方法，是根组件，不是父组件。...$root 访问根组件中的属性或方法 作用：访问根组件中的属性或方法 注意：是根组件，不是父组件。...$refs.child.sayHello(); // hello }, }; （4）$parent / $children 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法...需要注意： 通过$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例 在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的 在根组件#app上拿
子组件向父组件传值$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。...$refs.child.sayHello(); // hello },};（4）$parent / $children使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法...）使用$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。...需要注意：通过$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的在根组件#app上拿$parent...$attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上$listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合
插槽的使用 – 默认插槽 描述： 默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。...父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。即具名插槽用name属性来表示插槽的名字，不传为默认插槽 2....如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就不会填充到子组件的任何一个插槽中。 3....我们再来对比，作用域插槽跟单个插槽和具名插槽的区别，因为单个插槽和具名插槽不绑定数据，所以父组件提供的模板一般要既包括样式又包括内容，而作用域插槽，父组件只需要提供一套样式（在确实用作用域插槽绑定的数据的前提下...，不传为默认插槽 作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接收的对象上 //Child.vue <main
当在一个组件中，使用了其他自定义组件时，就会利用子组件的属性和事件来和父组件进行数据交流。...动态绑定特性值 根据上面，想要把父组件的属性绑定到子组件，应该使用v-bind，这样，父组件中数据改变时能反映到子组件。...注意，根据父组件传递给子组件的属性类型的不同，当在子组件中更改这个属性时，会有以下两种情况： 当父组件传递的属性是引用类型时，在子组件中更改相应的属性会导致父组件相应属性的更改。...demo2: 子组件希望对传入的prop进行操作 一般来说，是不建议在子组件中对父组件中传递来的属性进行操作的。...然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值： <blog-post ...
3.父容器开启flex布局，子容器margin:auto;也可以设置设置子容器居中。 塌陷问题 margin上下方向异常俗称“塌陷” float引起的父容器“塌陷”问题，而自己本身不会塌陷。...绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 的元素。绝对定位必须是作用于父级或往上的层级非static模式的布局里面才生效。...格式：display: flex; 写在父级元素(容器)里 容器属性 1. flex-direction： 主轴方向 2. flex-wrap： 主轴一行满了换行 3. flex-flow： 1和2的组合...，在不设置固定高度的时候，侧轴方向高度自动充满父容器。...子元素设置固定高度时，与flex-start效果一样。 align-content:stretch;属性是多行子元素默认值，在不设置固定高度的时候，侧轴方向高度自动平分父容器。
标签都相当于组件的实例化对象，我们希望方便快捷的调用，但同时需要考虑一个问题，这些实例化对象所访问的数据应该是不同的（否则在点击按钮的时候所有计数器的值都会发生改变），而函数恰好可以实现块级作用域...事件，而自定义事件如果不传参则默认传递自定义的参数 在实际操作的过程中是可以实现父、子数据的双向绑定。...但不建议这么使用：违反了组件独立性（包括数据）的原则。 组件访问 在某些场景下需要父组件直接访问子组件或者子组件直接访问父组件的内容。...父组件访问子组件：使用children（一般不用）或refs （常用） 子组件访问父组件：使用$parent 父组件访问子组件 <!...$children：会返回一个数组，数组内部是全部的子组件对象 后端使用this.$children(index)：会返回对应索引的子组件对象 子组件访问父组件 <!
解决：存入本地缓存 vue的传值方式 父组件向子组件传值 父组件通过属性的方式向子组件传值，子组件通过props来接受。 子组件接受的父组件的值分为引用数据类型和普通数据类型两种。...1.2 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 插槽使用 2.1 默认插槽 在子组件中写入slot，slot所在的位置就是父组件要显示的内容 2.2 具名插槽...在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer 在父组件中使用template并写入对应的slot名字来指定该内容在子组件中现实的位置 2.3 作用域插槽...原理：diff算法 1.vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素只操作数据，就可以重新渲染页面，而隐藏在背后的原理是高效的Diff算法 2.当页面数据发生变化时，Diff算法只会比较同一层级的节点...枚举：用于取值被限定在一定范围内的场景 Mixin：可以接受任意类型的值 泛型编程：写代码时使用一些以后才指定的类型 名字空间：名字只在该区域内有效，其他区域可重复使用该名字而不冲突 元组：元组合并了不同类型的对象
Proxy 可以劫持整个对象，并返回一个新的对象 必须深层遍历嵌套的对象 Proxy的优势如下: 针对对象： 针对整个对象，而不是对象的某个属性 ，所以也就不需要对 keys 进行遍历 支持数组：Proxy...$refs.child.sayHello(); // hello }, }; （4）$parent / $children 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法...需要注意： 通过$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例 在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的 在根组件#app上拿...$attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上 $listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合...这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
v-show：根据表达式之真假值，切换元素的 display CSS 属性。 v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。...Vue中为什么data是一个函数 因为组件是用来复用的，而js里对象是引用关系，如果组件中data是一个对象，那么作用域没有隔离，子组件中的data属性值 会相互影响。...而如果是函数的话，每个实例可以维护一份返回对象的独立拷贝，组件实例之间的data属性值不会相互影响。...在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据 的子组件发生变化，所以 vue 不推荐子组件修改父组件的数据 21. vue如何动态添加属性...直白的来说 query相当于get请求， 而params相当于post请求 24.vue set()方法 在vue中，当我们像对象中添加属性，当数据变化时，页面也要随着变化，这时用到set() set
（重点） 1 父子通信 在嵌套组件中,父组件中的[子组件标签] 绑定自定义属性; 在子组件中 props: { 子组件标签自定义的属性名: { type: , default} } 2 子父通信 在嵌套组件中...（重要） 捕获: 从document开始,层层子元素传递,直到点击到当前子元素 冒泡: 从点击当前子元素开始,层层父级传递,直到document 事件委托: 将子元素的事件交给父元素处理(主要是添加新的节点...答:数据从父级组件传递给子组件,子组件内部不能直接修改从父级传递过来的数据。...这样防止子组件意外改变父组件的状态 34.vue中有没有用过组件通信方式 (必背) 父传子:父组件中,子组件上通过属性绑定的方式向子中传递,子中用props接收即可 子传父:通过 e m i t 其中有两个参数第一个作为父中的事件函数...(必背) router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象， 例如history对象,经常用的跳转链接就可以用this.
组件里定义的prop都是单向数据流，只能通过父级组件对齐进行修改，组件本身不能修改props的值，只能修改定义在data里的数据，非要修改，也是通过后面介绍的自定义事件通知父级，由父级来修改； 在子组件定义...prop是，使用了camelCase的命名法，由于html特性不区分大小写。...camelCase的prop用于特性时，会转为短横线隔开(比如availableValue) 因为数组或对象是地址引用，vue不会检测到props发生改变 但官方不建议在子组件内改变父组件的值，因为这违反了...传递, 子组件向父组件传递数据则可以通过event传递： 非父子组件之间的通信方式：eventBus 我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下...> 在父级中，具有特殊属性scope的元素，表示它是作用域插槽的模板。
watch 属性监听 是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用 computed...除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed中的函数必须用return返回最终的结果 computed更高效，优先使用。data 不改变，computed 不更新。...本质上，这些实例用的都是同一个构造函数。 2.如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。...vuex 跨级组件通信 Vuex、attrs、listeners Provide、inject $emit 后面的两个参数是什么 1、父组件可以使用 props 把数据传给子组件。...它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。 作用：实现组件缓存，保持这些组件的状态，以避免反复渲染导致的性能问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
