Vue.js（8）- 父组件给子组件传值

父组件向子组件传值

最新推荐文章于 2025-06-17 10:37:35 发布

转载最新推荐文章于 2025-06-17 10:37:35 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/houfee/p/9963575.html

文章标签：

#javascript #ViewUI

本文详细介绍了在Vue框架中，父组件如何通过属性绑定的方式向子组件传递数据，包括简单数据类型和复杂数据类型的处理方法，以及如何在子组件中正确接收和修改这些值。

父组件给子组件传值原理：属性绑定

第一步：建立连接

B.vue

<template>
  <div>
    <h3>这是B.vue文件内容</h3>
    <h4>接收到父组件的值----{{msg}}</h4>
    <h4>接收到父组件的值----{{obj}}</h4>
  </div>
</template>

<script>
export default {
  // vue要保证props数据的原装行（自读），不建议修改，修改会报错
  // 如果想要修改，先预存到data中
  props: ['msg','obj']
}
</script>

<style lang="less" scoped>
div {
  border: 2px dashed purple;
  margin: 20px;
  h3 {
    color: green;
  }
}
</style>

A.vue

<template>
  <div class="one">
    <h1>这是A.vue文件内容</h1>
    <!-- 属性绑定传值 -->
    <my-b :msg="Amsg" :obj="Aobj"></my-b>
  </div>
</template>

<script>
// 导入子组件
import B from './B.vue'
export default {
  // 定义为私有子组件
  components: {
    'my-b': B
  },
  data() {
    return {
      Amsg: '这是父组件A的数据',
      Aobj: {name: "爸爸",age: 40}
    }
  }
}
</script>

<style lang="less" scoped>
  .one {
    border: 1px solid red;
    h1 {
    color: red;
  }
  }
</style>

index.js

// 导入vue
import Vue from 'vue/dist/vue.js'

// 导入自定义组件模板
import A from './A.vue'
// 定义为全局子组件
Vue.component('my-a',A)

const vm = new Vue({
  el: '#app',
  data: {
  },
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
</head>

<body>
  <div id="app">
    <p>这是index.html</p>
    <my-a></my-a>
  </div>

</body>

</html>