vue组件传值

最新推荐文章于 2024-05-24 15:48:22 发布

Misnice

最新推荐文章于 2024-05-24 15:48:22 发布

阅读量224

点赞数

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/Misnice/article/details/107809614

版权

Vue 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了Vue.js中父组件与子组件之间的数据传递方法，包括通过props属性从父组件向子组件传递数据，以及通过自定义事件实现子组件向父组件的数据回传。文章通过具体代码示例展示了如何正确使用这些机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、父组件向子组件传递数据，通过props属性的方式：
父组件中在子组件的标签中写上要传的值

<template>
  <div id="app">
    <!-- 使用v-bind命令将父组件中的数据绑定到子组件上 -->
    <Child v-bind:val1="value1" v-bind:val2="value2"></Child>
  </div>
</template>
<script>
  import Child from '@/components/Child.vue'
  export default {
    name: 'App',
    components: {
      Child
    },
    data(){
      return {
        value1: "父组件中的数据1",
        value2: "父组件中的数据2"
      }
    }
  }
</script>

子组件接收值的时候通过props属性接收，而且将props写成数组的话可以直接写父组件传过来的字段名，要是将props写成对象的话需要具体写每个接收值的数据类型

<script>
  export default {
    name: 'Child',
    // 在props属性里接收父组件传递过来的数据
    props: ["val1", "val2"],
    mounted () {
	   console.log(this.val1,this.val2);  //父组件中的数据1,父组件中的数据2
	 },
  }
</script>

或者将props写成对象，在props属性里接收父组件传递过来的数据,数据类型有String、Boolean、Array、Object、Number

<script>
  export default {
    name: 'Child',
    props:{
	    val1:{
	      type:String
	    },
	    val2:{
	      type:String,
	      default(){
	        return "父组件没传值的默认值"
	      }
    },
    mounted () {
	   console.log(this.val1,this.val2);  //父组件中的数据1,父组件中的数据2
	 },
  }
</script>

一、子组件向父组件传递数据，通过自定义事件的方式：
子组件中通过自定义一个时间，父组件中的子组件标签的事件参数就是子组件传过来的值

<script>
  export default {
    name: 'Child',
   data () {
       return {
            test:666,
        };
    },
    mounted () { 
	 	this.$emit('testEvent',this.test); 
	 	//第一个参数为自定义事件名，从第二个参数开始就是向父组件传递的参数，父组件中的执行事件的第一个参数就是这个数
	 },
  }
</script>

在父组件中通过事件接收数据

<template>
  <div id="app">
    <!-- testEvent为子组件自定义的事件名，testEventFn为自定义事件的执行函数 -->
    <Child @testEvent="testEventFn"></Child>
  </div>
</template>
<script>
  import Child from '@/components/Child.vue'
  export default {
    name: 'App',
    components: {
      Child
    },
    data(){
      return {}
    },
    methods: {
       testEventFn(a){ 
       		console.log(a);  //666
		},
    },
    
  }
</script>