Vue
开心怪兽
这个作者很懒,什么都没留下…
展开
-
Vue组件通讯-跨多层父子组件通信
跨多层父子组件通信,$emit 并没有什么用。相反,用集中式的事件中间件可以做到简单的升级。这会让组件之间的通信非常顺利,即使是兄弟组件。因为 Vue 通过事件发射器接口执行实例,实际上你可以使用一个空的 Vue 实例。比如,假设我们有个 todo 的应用结构如下:Todos├─ NewTodoInput└─ Todo└─ DeleteTodoButton可以通过单独的事件中心管理组件间的通信:// 将在各处使用该事件中心// 组件通过它来通信var eventHub = new Vue(原创 2021-07-09 23:06:38 · 802 阅读 · 1 评论 -
vue组件通讯-父传子
父组件向子组件传值(包括函数) 1.组件内部通过props接收传递过来的值; 2.父组件通过属性将值传递给子组件;可以在子组件中对父组件传递过来的数据进行操作,但不推荐 vue会给出warn警告。 因为props数据传递原则:单向数据流。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head>原创 2021-06-27 19:36:03 · 258 阅读 · 0 评论 -
vue组件 data为函数类型的原因
如果使用对象形式定义data,复用组件时,会导致它们共用一个data对象,那么状态变更将会影响所有组件实例;采用函数定义,在初始化数据时,会将其作为工厂函数返回全新data对象,有效避免多实例之间状态污染问题。 在vue根实例创建过程中不存在这种限制,是因为根实例只能有一个,不需要担心这种情况。 且组件内data函数不能返回一个全局变量,也会产生状态污染问题: 代码示例:comp-one组件内的data配置,返回一个全局对象,复用comp-one组件,改变第一个组件内text的值,第二个组件也跟着一.原创 2021-06-27 18:59:28 · 154 阅读 · 0 评论 -
vue watch使用场景和方法
**watch**watch是什么?侦听器,vue通过watch来提供更通用的方法来响应数据变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。示例:<div id="app"> 千米: <input type="text" v-model="kilometers" /> 米: <input type="text" v-model="meters"/> </div> <p id="info原创 2021-05-31 00:13:01 · 3320 阅读 · 4 评论 -
Vue数据绑定
(1)v-bind:绑定动态属性。响应更新HTML特性,将一个或多个attribute或者一个组件prop动态绑定到表达式。可简写为":"。(2)v-model:用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定,根据控件类型,v-model自动选取正确的方法更新DOM。v-model是语法糖,在用户输入事件中更新数据。(3)v-html:更新元素的innerHTML。不建议在网站上直接动态渲染html片段,很容易导致XSS攻击。<div v原创 2021-05-30 22:25:00 · 146 阅读 · 0 评论 -
vue组件生命周期
在这一步执行了render function,将模板中的DOM节点渲染为真正要挂载到实例中去的DOM节点。原创 2021-05-30 20:41:01 · 87 阅读 · 0 评论 -
vue实例
一、实例的属性值vm.$dataVue 实例观察的数据对象vm.$props当前组件接收到的 props 对象。vm.$elVue 实例使用的根 DOM 元素.vm.$options用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处:vm.$root当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。vm.$parents父实例,如果当前实例有的话。vm.$children当前实例的直接子..原创 2021-05-30 20:09:16 · 922 阅读 · 0 评论 -
Vuex
标题1. Vuex是什么?Vuex是实现组件全局状态(数据)管理的一种机制,可以方便地实现组件之间数据的共享。2. 使用Vuex统一管理状态的好处(1)能够在Vuex中几种管理共享的数据,易于开发和后期维护。(2)能够高效地实现组件之间的数据共享,提高开发效率。(3)存储在Vuex中的数据都是响应式的,能够实时保持数据与页面的同步。3. 什么样的数据适合存储到Vuex中?一般情况下,只有组件之间共享的数据,才有必要存储到Vuex中;对于组件中的私有数据,依旧存储在data中。4. Vuex原创 2021-03-22 15:33:39 · 72 阅读 · 0 评论