Vue父子组件之间传递数据

星悦糖

已于 2022-06-24 11:32:11 修改

阅读量1.3k

点赞数 5

分类专栏： vue 文章标签： vue.js 前端

于 2022-06-24 11:08:46 首次发布

本文链接：https://blog.csdn.net/friggly/article/details/125439482

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中父子组件之间的数据传递方式，包括使用v-bind和props从父组件向子组件传递数据，以及通过自定义事件$emit从子组件向父组件传递数据。同时，还展示了如何实现父子双向绑定。这些方法在实际开发中非常常用，对于理解和掌握Vue组件通信至关重要。

摘要由CSDN通过智能技术生成

父向子：v-bind()+props

父组件绑定属性向子组件传递数据，子组件通过props进行数据的接收。

父组件代码如下：

<template>
    <div id="app">
        <child :num="size"></child>
    </div>
</template>

<script>
    //引入组件
    import child from '@/zhao/data'
    export default{
        name:'app',
        data(){
            return{
                size:22,
            }
        },
        //注册组件
        components:{
            child,
        }
    }
</script>

子组件接收和使用数据：

<template>
  <div id="father">
    <!-- 使用数据  -->
    {{ num }}
  </div>
</template>

<script>
export default {
  name:'father',
  data(){
    return{
    
    }
  },
  // 接收数据
  props: ['num'],
}
</script>

子向父：自定义事件 $emit

子组件部分代码：

<template>
    <div id = "login">
        <label>
            <p用户名：{{user}}</p>
            <input v-model="username" @change="setUser"/>
        </label>
    </div>
</template>

<script>
export default {
  name:'login',
  data(){
    return{
        username:'',
    }
  },
  methods:{
    setUser:function(){
        this.$emit('transferUser',this.username)
    }
  },
  components:{
      LoginDiv,
  },
}
</script>

父组件部分代码：

<template>
    <div id = "app">
        <LoginDiv @transferUser="getUser"></LoginDiv>
        <p用户名：{{user}}</p>
    </div>
</template>

<script>
//引入组件
import LoginDiv from '@/zhao/login'
export default {
  name:'app',
  data(){
    return{
        user:'',
    }
  },
  methods:{
    getUser(msg){
        this.user = msg
    }
  },
  components:{
      LoginDiv,
  },
}
</script>

总结：

（1）子组件传递数据：

this.$emit('自定义事件名', '要传递的数据')

（2）父组件接收数据：

<子组件名 @自定义事件名="方法名"/>
//.....
methods: {
    方法名(val) {
      // val 是子组件传递过来的数据
      // 、、、
    }
  }

父子双向：v-model + this.$emit()

父组件部分代码：

<template>
  <div class="home">
    <h1>Home 组件- - -{{ count }}</h1>
    <button @click="count+=1">点击按钮， 数量 +1（父组件）</button>

    <Test v-model:num="count"/>
  </div>
</template>

<script>
import Test from './components/Test'

export default {
  name: 'Home',
  components: {
    Test,
  },
  data() {
    return {
      count: 1
    }
  },
}
</script>

子组件部分代码：

<template>
  <div>
    <h1>Test 组件- - -{{ num }}</h1>
    <button @click="add">点击按钮 数量 +1（子组件）</button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: ['num'],
  emits: ['update:num'], // 这行可写可不写，写了是方便统计emit方法，这里定义了的方法，后面this.$emit才能触发
  methods: {
    add() {
      this.$emit('update:num', this.num + 1)
   }
  }
}
</script>

<style>

</style>

总结：

（1）父组件核心代码

<子组件名 v-model:属性名="属性值"/>

（2）子组件核心代码

<template>
  <div>
    <!-- 使用数据  -->
    {{ 属性名 }}
    <button @click="方法名">点击进行操作</button>
  </div>
</template>

<script>
export default {
  // 接收数据
  props: ['属性名'],
  emits: ['update:属性名'], // 这行可写可不写，写了是方便统计emit方法，写了的话，这里定义了的方法，后面this.$emit才能触发
  methods: {
    方法名() {
      this.$emit('update:属性名', 属性值操作)
   }
  }
}
</script>