Vue中常用组件通信传值方法,前端开发工作

25 阅读1分钟

methods:{

sendData(){

this.$emit('confirm',this.childMessage)

}

}

}

App.vue

在父组件调用子组件的地方绑定一个@confirm

这个confirm哪来的呢?就是子组件在emit中定义好的

this.$emit('confirm',this.childMessage)

  • 第一个入参是事件名,第二个是具体的值

父组件中不需要在接收的时候定义任何形参,默认的第一个形参就是子组件过来的值

confirm(val){

alert(val)

}

这样就实现了子组件中按钮点击触发事件,把子组件中的任意参数带过来。

2.refref refs


vue中使用ref可以取到子组件中的变量或方法

怎么使用呢?

只需要在子组件标签定义

使用的时候

this.$refs.childRef.childFunc()

this.$refs.childRef.childMessage

这里this.$refs.childRef就表示了子组件这个对象了,可以分别取其中的值的方法

App.vue

Child.vue

3.$router路由传参


我们在Demo1组件即将跳转到另一个组件的时候往this.$router里面装一个参数进去

this.$router.param = param

在Demo2组件create的时候打印一下这个

console.log(this.$router.param);

就可以看到Demo1带过来的参数了

Demo1.vue

Demo2.vue

4.Vuex


getter.js

先定义好使用的vuex变量

const getters = {

msg: (state) => state.info.msg,

}

export default getters

info.js

const state = {

msg:null,

}

const mutations = {

setMsg(state, payload) {

state.msg = payload

console.log(444,state.msg);

},

}

export default {

namespaced: true,

state,

mutations,

}

全局注册vuex

import Vue from 'vue'

import Vuex from 'vuex'

import info from './modules/info'

import getters from './getters'

基础面试题

主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等

开源分享:docs.qq.com/doc/DSmRnRG…