伊利网站建设水平评价,本人承接网站建设,wordpress数据库怎么添加积分,设定wordpress账号密码前言 组件是 vue.js最强大的功能之一#xff0c;而组件实例的作用域是相互独立的#xff0c;这就意味着不同组件之间的数据无法相互引用。一般来说#xff0c;组件可以有以下几种关系#xff1a; 如上图所示#xff0c;A 和 B、B 和 C、B 和 D 都是父子关系#xff0c;C … 前言 组件是 vue.js最强大的功能之一而组件实例的作用域是相互独立的这就意味着不同组件之间的数据无法相互引用。一般来说组件可以有以下几种关系 如上图所示A 和 B、B 和 C、B 和 D 都是父子关系C 和 D 是兄弟关系A 和 C 是隔代关系可能隔多代。 针对不同的使用场景如何选择行之有效的通信方式 方法一、 props / $emit 父组件A通过props的方式向子组件B传递。 1.父组件向子组件传值 接下来我们通过一个例子说明父组件如何向子组件传递值在子组件Users.vue中如何获取父组件App.vue中的数据 users:[Henry,Bucky,Emily] //App.vue父组件
templatediv idappusers v-bind:usersusers/users//前者自定义名称便于子组件调用后者要传递数据名/div
/template
script
import Users from ./components/Users
export default {name: App, data(){ return{ users:[Henry,Bucky,Emily] } }, components:{ users:Users } } 复制代码 //users子组件
templatediv classhelloulli v-foruser in users{{user}}/li//遍历传递过来的值然后呈现到页面/ul/div
/template
script
export default {name: HelloWorld,props:{users:{ //这个就是父组件中子标签自定义名字type:Array, required:true } } } /script 复制代码 总结父组件通过props向下传递数据给子组件。注组件中的数据共有三种形式data、props、computed 2.子组件向父组件传值通过事件形式 接下来我们通过一个例子说明子组件如何向父组件传递值当我们点击“Vue.js Demo”后子组件向父组件传递值文字由原来的“传递的是一个值”变成“子向父组件传值”实现子组件向父组件值的传递。 // 子组件
templateheaderh1 clickchangeTitle{{title}}/h1//绑定一个点击事件/header
/template
script
export default {name: app-header,data() { return { title:Vue.js Demo } }, methods:{ changeTitle() { this.$emit(titleChanged,子向父组件传值);//自定义事件 传递值“子向父组件传值” } } } /script 复制代码 // 父组件
templatediv idappapp-header titleChangedupdateTitle /app-header//与子组件titleChanged自定义事件保持一致// updateTitle($event)接受传递过来的文字h2{{title}}/h2/div
/template
script
import Header from ./components/Header
export default { name: App, data(){ return{ title:传递的是一个值 } }, methods:{ updateTitle(e){ //声明这个函数 this.title e; } }, components:{ app-header:Header, } } /script 复制代码 总结子组件通过events给父组件发送消息实际上就是子组件把自己的数据发送到父组件。 方法二、 中央事件总线EventBus 对于父子组件之间的通信上面的方式是完全可以实现的但是对于两个组件不是父子关系那么又该如何实现通信呢在项目规模不大的情况下完全可以使用中央事件总线 EventBus 的方式。如果你的项目规模是大中型的那你可以使用我们后面即将介绍的 Vuex 状态管理。 EventBus的简介 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念就像是所有组件共用相同的事件中心可以向该中心注册发送事件或接收事件所以组件都可以上下平行地通知其他组件但也就是太方便所以若使用不慎就会造成难以维护的灾难因此才需要更完善的Vuex作为状态管理中心将通知的概念上升到共享状态层次。 如何使用EventBus 在Vue的项目中怎么使用 EventBus 来实现组件之间的数据通讯呢具体可以通过下面几个步骤来完成。 初始化 首先你需要做的是创建事件总线并将其导出以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种新创建一个 .js 文件比如 eventBus.js // eventBus.js
import Vue from vue
export const EventBus new Vue()
复制代码 你需要做的只是引入 Vue 并导出它的一个实例在这种情况下我称它为 EventBus 。实质上它是一个不具备 DOM 的组件它具有的仅仅只是它实例方法而已因此它非常的轻便。 另外一种方式可以直接在项目中的 main.js 初始化 EventBus // main.js
Vue.prototype.$EventBus new Vue()
复制代码 注意这种方式初始化的 EventBus 是一个 全局的事件总线 现在我们已经创建了 EventBus 接下来你需要做到的就是在你的组件中加载它并且调用同一个方法就如你在父子组件中互相传递消息一样。 例子 在A.vue中触发 import EventBus from eventBus.js;
// 必须引入同一个实例methods {doSomething() {EventBus.$emit(getTarget, 22); console.log(向getTarget方法传参22); } } 复制代码 B.vue中监听一个事件 import EventBus from eventBus.js;
// 我们在create钩子中监听方法
create(){console.log(this.getTarget是一个带参数的方法但是这边只要将两者关联起来);EventBus.$on(getTarget, this.getTarget); }, beforeDestroy() { console.log(组件销毁前需要解绑事件。否则会出现重复触发事件的问题); EventBus.$off(getTarget, this.getTarget); }, methods: { getTarget(param) { // todo } } 复制代码 eventBus其实非常方便任何的组件通信都能用它来完成。但是我们会根据情况来选择更易维护的方式。因为eventBus比较不好找到对应的监听或者触发事件具体实现的地方所以一般组件通信更考虑上面的实现方式。在模块之间通信利用eventBus然后在模块内部利用vuex通信维护数据会在逻辑上比较清晰。 方法三、 vuex 1.简要介绍Vuex原理 Vuex实现了一个单向数据流在全局拥有一个State存放数据当组件要更改State中的数据时必须通过Mutation进行Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action但Action也是无法直接修改State的还是需要通过Mutation来修改State的数据。最后根据State的变化渲染到视图上。 2.简要介绍各模块在流程中的功能 Vue ComponentsVue组件。HTML页面上负责接收用户操作等交互行为执行dispatch方法触发对应action进行回应。 dispatch操作行为触发方法是唯一能执行action的方法。 actions操作行为处理模块,由组件中的 $store.dispatch(action 名称,data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作支持多个同名方法按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装以支持action的链式触发。 commit状态改变提交操作方法。对mutation进行提交是唯一能执行mutation的方法。 mutations状态改变操作方法由actions中的 commit(mutation 名称)来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作且方法名只能全局唯一。操作之中会有一些hook暴露出来以进行state的监控等。 state页面状态管理容器对象。集中存储Vue components中data对象的零散数据全局唯一以进行统一的状态管理。页面显示所需的数据从该对象中进行读取利用Vue的细粒度数据响应机制来进行高效的状态更新。 gettersstate对象读取方法。图中没有单独列出该模块应该被包含在了render中Vue Components通过该方法读取全局state对象。 3.具体使用 store/index.js import Vuex from vuex;
import Vue from vue;
Vue.use(Vuex);
const store new Vuex.Store({state: {stateName: xxxx},mutations: {mutationsName(state, {params}) {state.stateName params;console.log(只有在mutations中才能直接改变state中的值)} },actions: {actionName({ state,commit}, {params}) {let actionParam mmm; commit(mutationsName, actionParam ); console.log( 触发mutation 方法要用commit分发以此改变state); } } }); export default store; 复制代码 main.js import store from ./store/index.js;
new Vue({el: #app,store,console.log(将store挂载到vue实例上)render: h h(App)
})
复制代码 在组件中使用 child.vue js部分 **import { mapActions, mapMutations, mapState } from vuex;
export default {computed: {...mapState({ stateName })},methods: {...mapActions([actionName]),...mapMutations([mutationName])console.log(使用辅助函数mapMutations直接将触发函数映射到methods上) } // 接下来在实例中就可以用this.stateName,this.actionName来调用 } 复制代码 当兄弟组件很多涉及到的处理数据庞大的时候可以用到vuex中的modules使得结构更加清晰 const moduleA {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const moduleB {state: { ... },mutations: { ... },actions: { ... }
}const store new Vuex.Store({modules: {a: moduleA,b: moduleB}
})store.state.a // - moduleA 的状态
store.state.b // - moduleB 的状态
复制代码 方法四、 attrs/ listeners 1.简介 多级组件嵌套需要传递数据时通常使用的方法是通过vuex。但如果仅仅是传递数据而不做中间处理使用 vuex 处理未免有点大材小用。 父子组件之间的数据传输有一个问题如果父组件A下面有子组件B组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢 如果采用props方法我们必须让组件A通过prop传递消息给组件B组件B在通过prop传递消息给组件C要是组件A和组件C之间有更多的组件那采用这种方式就很复杂了。Vue 2.4开始提供了attrs和listeners来解决这个问题能够让组件A之间传递消息给组件C。 官网对 $attrs 的解释如下 $attrs包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时这里会包含所有父作用域的绑定 (class 和 style 除外)并且可以通过 v-bind$attrs 传入内部组件。通常配合 interitAttrs 选项一起使用。
复制代码 官网对 $listeners 的解释如下 $listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on$listeners 传入内部组件
复制代码 以上是官网对$attrs的解释我刚看我也是一脸懵逼回去试了一下其实并不难而且比较适用组件深层嵌套场景下祖先组件向子组件传值的问题 我的理解 意思就是父组件传向子组件传的子组件不prop接受的数据都会放在$attrs中子组件直接用this.$attrs获取就可以了。如过从父-孙传就在子组件中添加v-bind$attrs就把父组件传来的子组件没props接收的数据全部传到孙组件我觉得 $attrs 和 $listeners 属性像两个收纳箱一个负责收纳属性一个负责收纳事件都是以对象的形式来保存数据 复制代码 接下来我们看个跨级通信的例子 // index.vue
templatedivh2科大讯飞/h2child-com1:foofoo:booboo:coocoo:doodooone.nativetriggerOne twotriggerTwo titleVue通信 /child-com1 /div /template script const childCom1 () import(./childCom1.vue); export default { components: { childCom1 }, data() { return { foo: Javascript, boo: Html, coo: CSS, doo: Vue }; }, methods:{ triggerOne(){ alert(one) }, triggerTwo(){ alert(two) } } }; /script 复制代码 // childCom1.vue
template classborderdivpfoo: {{ foo }}/ppchildCom1的$attrs: {{ $attrs }}/pchild-com2 v-bind$attrs v-on$listeners/child-com2 /div /template script const childCom2 () import(./childCom2.vue); export default { components: { childCom2 }, // 默认为true如果传入的属性子组件没有prop接受就会以字符串的形式出现为标签属性 // 设为false在dom中就看不到这些属性试一下就知道了 inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性 props: { foo: String // foo作为props属性绑定 }, mounted() { console.log(this.$attrs); // { boo: Html, coo: CSS, doo: Vue, title: Vue通信 } console.log(this.$listeners); } }; /script 复制代码 // childCom2.vue
templatediv classborderpboo: {{ boo }}/ppchildCom2的$attrs: {{ $attrs }}/pchild-com3 v-bind$attrs v-on$listeners/child-com3 /div /template script const childCom3 () import(./childCom3.vue); export default { components: { childCom3 }, inheritAttrs: false, props: { boo: String }, mounted() { console.log(this.$attrs); // {coo: CSS, doo: Vue, title: Vue通信 } console.log(this.$listeners); } }; /script 复制代码 // childCom3.vue
templatediv classborderpchildCom3: {{ $attrs }}/p/div
/template
script
export default {props: {coo: String,title: String},mounted() { console.log(this.$listeners); // this.$listeners.two(); } }; /script 复制代码 $attrs表示没有继承数据的对象格式为{属性名属性值}。Vue2.4提供了 $attrs , $listeners 来传递数据与事件跨级组件之间的通讯变得更简单。
简单来说 $attrs与 $listeners 是两个对象 $attrs 里存放的是父组件中绑定的非 Props 属性 $listeners里存放的是父组件中绑定的非原生事件。 复制代码 方法五、 provide/inject (底层的通用组件时使用频率会很高) 1.简介 Vue2.2.0新增API,这对选项需要一起使用以允许一个祖先组件向其所有子孙后代注入一个依赖不论组件层次有多深并在起上下游关系成立的时间里始终生效。一言而蔽之祖先组件中通过provider提供变量然后在子孙组件中通过inject来注入变量。provide / inject API 主要解决了跨级组件间的通信问题不过它的使用场景主要是子组件获取上级组件的状态跨级组件间建立了一种主动提供与依赖注入的关系。 来看下官方对 provide / inject 的描述 provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用以允许一个祖先组件向其所有子孙后代注入一个依赖不论组件层次有多深并在起上下游关系成立的时间里始终生效。 2.举个例子 假设有两个组件 A.vue 和 B.vueB 是 A 的子组件 // A.vue
export default {provide: {name: 科大讯飞}
}
复制代码 // B.vue
export default {inject: [name],mounted () {console.log(this.name); // 科大讯飞}
}
复制代码 可以看到在 A.vue 里我们设置了一个 provide: name值为 科大讯飞它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中通过 inject 注入了从 A 组件中提供的 name 变量那么在组件 B 中就可以直接通过 this.name 访问这个变量了它的值也是 科大讯飞。这就是 provide / inject API 最核心的用法。 需要注意的是provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而如果你传入了一个可监听的对象那么其对象的属性还是可响应的----vue官方文档。所以上面 A.vue 的 name 如果改变了B.vue 的 this.name 是不会改变的仍然是 科大讯飞。 3.provide与inject 怎么实现数据响应式 一般来说有两种办法 provide祖先组件的实例然后在子孙组件中注入依赖这样就可以在子孙组件中直接修改祖先组件的实例的属性不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如propsmethods 使用2.6最新API Vue.observable 优化响应式 provide(推荐) 我们来看个例子孙组件E 和 获取A组件传递过来的color值并能实现数据响应式变化即A组件的color变化后组件E、F会跟着变核心代码如下 // A 组件
divh1A 组件/h1button click() changeColor()改变color/buttonChildrenB /ChildrenC /
/div
......data() {return {color: blue }; }, // provide() { // return { // theme: { // color: this.color //这种方式绑定的数据并不是可响应的 // } // 即A组件的color变化后组件E、F 不会跟着变 // }; // }, provide() { return { theme: this//方法一提供祖先组件的实例 }; }, methods: { changeColor(color) { if (color) { this.color color; } else { this.color this.color blue ? red : blue; } } } // 方法二:使用vue2.6最新API Vue.observable 优化响应式 provide // provide() { // this.theme Vue.observable({ // color: blue // }); // return { // theme: this.theme // }; // }, // methods: { // changeColor(color) { // if (color) { // this.theme.color color; // } else { // this.theme.color this.theme.color blue ? red : blue; // } // } // } 复制代码 // F 组件
template functionaldiv classborder2h3 :style{ color: injections.theme.color }F 组件/h3/div
/template
script
export default {inject: {theme: {//函数式组件取值不一样default: () ({})}}
};
/script
复制代码 虽说provide 和 inject 主要为高阶插件/组件库提供用例但如果你能在业务中熟练运用可以达到事半功倍的效果 方法六、 parent / children ref $parent / $children访问父 / 子实例
ref如果在普通的 DOM 元素上使用引用指向的就是 DOM 元素如果用在子组件上引用就指向组件实例
复制代码 需要注意的是这两种都是直接得到组件实例使用后可以直接调用组件的方法或访问数据。我们先来看个用 ref来访问组件的例子 // component-a 子组件
export default {data () {return { title: Vue.js } }, methods: { sayHello () { window.alert(Hello); } } } 复制代码 // 父组件
templatecomponent-a refcomA/component-a
/template
scriptexport default {mounted () { const comA this.$refs.comA; console.log(comA.title); // Vue.js comA.sayHello(); // 弹窗 } } /script 复制代码 $parent 和 $children
复制代码 这里要说的这种方式就比较直观了直接操作父子组件的实例。children 就是当前实例的直接子组件实例了不过这个属性值是数组类型的且并不保证顺序也不是响应式的。 parent组件 templatediv classpthis is parent component!/pbutton clickchangeChildValuetest/buttonchild //div
/templatescript
export default {data() { return { message: hello } }, methods: { changeChildValue(){ this.$children[0].mymessage hello; } }, } /script style langless scoped /style 复制代码 children组件 templatediv classinput typetext v-modelmymessage changechangeValue / /div /template script export default { data() { return { mymessage: this.$parent.message } }, methods: { changeValue(){ this.$parent.message this.mymessage;//通过如此调用可以改变父组件的值 console.log(this.$parent.message) } } } /script style langless scoped /style 复制代码 不过这两种方法的弊端是无法在跨级或兄弟间通信。 // parent.vue
component-a/component-a
component-b/component-b
component-b/component-b
复制代码 我们想在 component-a 中访问到引用它的页面中这里就是 parent.vue的两个 component-b 组件那这种情况下就得配置额外的插件或工具了比如 Vuex 和 Bus 的解决方案。 总结 常见使用场景可以分为三类
父子通信 父向子传递数据是通过 props子向父是通过 events $emit通过父链 / 子链也可以通信 $parent / $childrenref 也可以访问组件实例provide / inject API $attrs/$listeners 兄弟通信 BusVuex 跨级通信 BusVuexprovide / inject API、 $attrs/$listeners 转载于:https://www.cnblogs.com/baoshuyan66/p/11269756.html
