Vue中如何实现父子组件传值

Vue中如何实现父子组件传值，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

（一）传递数值

1.子组件：Header.vue

<template>
 <div>
  <!-- data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性 -->
  <h3>{{msg}}</h3>
 </div>
</template>
<script>
export default {
 data() {
  return {
  }
 },
 methods: {
 },
 // 接收父类的传值
 props: ['msg']
}
</script>

可以看到，在子组件中的data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性，接收就是靠 props: ['msg']。

2.父组件Home.vue

<template>
 <div>
  <!-- 2.使用子组件，并向子组件传值 -->
  <v-head :msg="msg"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一个组件'
  }
 },
 methods: {
 },
 components: {
  "v-head": Head
 },
 // 页面刷新时请求数据
 mounted() {
 }
}
</script>

传值的核心思想就是，在使用子组件的地方，加上要传递的值:<v-head :msg="msg"></v-head>

（二）传递方法

传递方法的写法和传递数值一样，下面只写出关键步骤：

父组件

<template>
 <div>
  <!-- 2.使用子组件，并向子组件传值 -->
  <v-head :run="run"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一个组件'
  }
 },
 methods: {
  run() {
   alert(this.msg);
  }
 },
 components: {
  "v-head": Head
 },
 // 页面刷新时请求数据
 mounted() {
 }
}
</script>

子组件

<template>
 <div>
  <button @click="run">接收父组件的方法</button>
 </div>
</template>
<script>
export default {
 data() {
  return {
  }
 },
 methods: {
 },
 // 接收父类的传值
 props: ['run']
}
</script>

（三）传递对象

传递对象的写法和传递数值一样，下面只写出关键步骤：

父组件

<template>
 <div>
  <!-- 2.使用子组件，并向子组件传值，这里的 this 就是 Home 组件 -->
  <v-head :home="this"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一个组件'
  }
 },
 methods: {
  run() {
   alert(this.msg);
  }
 },
 components: {
  "v-head": Head
 },
 // 页面刷新时请求数据
 mounted() {
 }
}
</script>

子组件

<template>
 <div>
  <!-- data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性 -->
  <h3>{{msg}}</h3>
  <br>
  <br>
  <button @click="run">接收父组件的方法</button>
 </div>
</template>
<script>
export default {
 data() {
  return {
   // 调用传过来的home组件的msg属性
   msg: this.home.msg
  }
 },
 methods: {
  run() {
   // 调用传过来的home组件的run()方法
   this.home.run();
  }
 },
 // 接收父类的传值
 props: ['home']
}
</script>

（四）传递数值类型校验

props: {
  'home': Object
 }

看完上述内容，你们掌握Vue中如何实现父子组件传值的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网VUE频道，感谢各位的阅读！