父组件向子组件传值

步骤:

1、在子组件中用props创建一个属性(如:sha),用以接收父组件传过来的内容;

2、在子组件标签中添加子组件props中创建的属性;

3、在父组件注册子组件(import child from './child'),

4、在template中添加标签child(标签名字就是子组件的组件名),标签中添加属性sha,然后赋值(估值内容就是添加到子组件的值);

5、在components中添加子组件名称(child)。


child.vue

<template>

<div>

<h2>子组件</h2><hr/>

<h3>{{msg}}</h3>

// 2、在子组件标签中添加子组件props中创建的属性;

<h4>{{sha}}</h4>

</div>

</template>

<script>

export default{

data(){

return{

msg:'child页面'

}

},

// 1、在子组件中用props创建一个属性(如:sha),用以接收父组件传过来的内容;

props:['sha']

}

</script>


father.vue

<template>

<div>

<h2>父组件</h2>

<h3>{{msg}}</h3>

// 4、在template中添加标签child(标签名字就是子组件的组件名),标签中添加属性sha,然后赋值(估值内容就是添加到子组件的值);

<child sha="插入子组件数值内容"></child>

</div>

</template>

<script>

// 3、在父组件注册子组件

import child from './child'

export default{

data(){

return{

msg:"qqqqq"

},

// 5、在components中添加子组件名称(child)。

components:{

child

}

}

}

</script>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值