vue中把props中的值赋值给data

木豆mudou

于 2018-12-26 14:37:11 发布

阅读量2.6w

点赞数 2

本文链接：https://blog.csdn.net/qq_37146616/article/details/85261753

版权

本文详细介绍了在Vue项目中如何实现父组件向子组件传递数据的案例。通过具体代码展示了如何在父组件中定义数据并将其作为属性传递给子组件，以及子组件如何接收和使用这些数据。

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

父组件：

<template>
	<div>
		<navbar :ctype="ctype"></navbar>
	</div>
</template>

<script>
import navbar from '@/components/navbar'
   export default {
   	components: {navbar},
   	data () {
   		return{
   			ctype:1
   		}
   	}
   }
</script>

子组件：

<template>
	<div>
		<div>{{thistype}}</div>
	</div>
</template>

<script>
export default {
    props:['ctype'],
    computed: {
      normalizedSize: function () {
        return this.ctype.trim().toLowerCase()
      }
    },
    data(){
        return{
            thistype:this.ctype
        }
    }
}
</script>