前端面试题，vue详解（组件传值）

Zahirah ·

更新时间:2024-09-20

· 568 次阅读

看了很多关于vue组件传值的文章，于是想把文章总结一下，把关于vue组件传值好好聊聊，欢迎大家指正。

组件之间传值主要分两种
1、父子组件：props方法、ref方法、children和parent方法、 emit方法
2、非父子组件：公共bus.js、attrs/listeners、vuex

一、父子组件传值 1、props方法

父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象

父组件


   
  
// 引入子组件
import child from './child'
export default {
  components: {
    child,
  },
  data () {
    return {
      msg: '父组件传给值'
    }
  },
}

子组件


  
    {{msg}}
  
export default {
  // 要接受父组件传递的参数，在 props 中添加了元素之后，就不需要在 data 中再添加变量了
  props: {
    msg: {
      type: String
    },
  },
}

2、$ref方法

使用ref方法获取指定的子组件，使父组件轻松获取子组件的值，

父组件


    
    {{msg2}}
  
// 引入子组件
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return { 
      msg2: this.$refs.child.msg2
    }
  }
}

子组件


   
    {{msg2}}
  
export default { 
  data(){
    return{
      msg2: "子组件传给父组件"
    }
  }
}

3、children，parent方法

使用 parent 查找当前组件的父组件。
使用 this.$children 查找当前组件的直接子组件，可以遍历全部子组件，需要注意 $children 并不保证顺序，也不是响应式的，故不推荐使用。
父组件


    
    {{msg2}}
  
// 引入子组件
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return { 
      msg: "父组件传给子组件",
      msg2: ""
    }
  },
  mounted(){
    // 注意，this.$children[0].msg2只能在mounted生命周期下面才能获取，否则会报错
    this.msg2 = this.$children[0].msg2
  }
}

子组件


   
    {{msg}}
  
export default { 
  data(){
    return{
      msg2: "子组件传给父组件",
      msg: this.$parent.msg
    }
  }
}

4、emit方法

子组件使用emit触发父组件的自定义事件：

vm.$emit( event, arg ) 	//触发当前实例上的事件
vm.$on( event, fn )	//监听event事件后运行 fn

父组件


    
    {{msg2}}
  
// 引入子组件
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return { 
      msg2: "父组件的值", 
    }
  },
  methods:{
    //changeMsg是自定义方法名，msg是子组件传过来的参数
    changeMsg(msg){
      this.msg2 = msg
    }
  }
}

子组件


    
    
  
export default { 
  data(){
    return{
      msg: "子组件传给父组件"
    }
  },
  methods: {
    open(){
   	  //eventName是父组件的自定义方法名，this.msg是传过去的参数
      this.$emit('eventName', this.msg)
    }
  }
}

二、非父子组件传值 1、公共的bus.js

1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据。
2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。
3、传递数据方，通过一个事件触发bus.$emit（方法名，传递的数据)。
4、接收数据方，通过mounted(){}触发bus.$on (方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

bus.js

import Vue from 'vue'
export default new Vue

公共组件存放兄弟组件


  
  
import list1 from './list1'
import list2 from './list2'
export default {
  components:{
    list1,
    list2
  }
}

兄弟组件1


    
    {{msg}} 
    
  
import bus from "./bus"
export default { 
  data() {
    return { 
      msg: "大哥组件的值传给小弟", 
    }
  },
  methods:{ 
    trans(){
      bus.$emit('eventName', this.msg)
    }
  }
}

兄弟组件2


    
    {{msg}} 
  
import bus from "./bus"
export default { 
  data() {
    return { 
      msg: "小弟组件的值",
    }
  }, 
  mounted(){
    bus.$on('eventName', val =>{ 
      this.msg = val; 
    })
  }
}

2、attrs和listeners的使用

import Child2 from './Child2' export default { props: ['pChild1'], data() { return {} }, inheritAttrs: false, components: { Child2 }, mounted() { this.$emit('test1') } }

C组件


  
    in child2:
    props: {{pChild2}}
    $attrs: {{$attrs}}
    
  
export default {
  props: ['pChild2'],
  data() {
    return {}
  },
  inheritAttrs: false,
  mounted() {
    this.$emit('test2')
  }
}

3、vuex

vuex是我们开发中最常用的一种跨组件传值方式，下期我们单独聊聊vuex。以上就是vue组件传值常用的几种方式，如有错误，欢迎指正。

作者：银鞍照白马

VUE 面试题前端面试前端面试题面试前端

1024 个赞