Vue2 父子组件的传值

原创

已于 2022-09-22 09:09:47 修改 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #vue

于 2022-04-26 10:03:10 首次发布

本文介绍了Vue2中父子组件的数据传递规则。强调了prop是单向数据流，禁止直接在子组件中修改prop，推荐使用data或计算属性。同时，详细讲解了如何通过props传递初始值和转换prop值。对于对象或数组类型的prop，由于引用传递，子组件的修改会影响父组件。此外，还探讨了子组件如何通过事件向父组件传递数据。

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

1.父传子

<!-- 父组件 App.vue -->
<template>
  <div id="app">
	<Child :msg="msg"></Child>
  </div>
</template>


<script>
import Child from './components/child.vue'

export default {
   
   
  name: 'app',
  data(){
   
   
	  return{
   
   
		  msg:'我是父组件的值',
	  }
  },
  components: {
   
   
    Child
  },
  methods:{
   
   

  }
}
</script>

<style>

</style>

------------------------------------------