vue中使用props传值的方法
作者:yang_da_da 时间:2024-05-03 15:10:50
1.静态传值(在父组件中赋值好props中属性的值传递给子组件)
父组件
<template>
<div>
<input v-model="message">
<child message="hello"></child>
</div>
</template>
<script>
import child from './components/child.vue'
export default{
components:{
child
}
}
</script>
子组件
<template>
<p>{{message}}</p>
</template>
<script>
export default{
props:['message'],
data(){
},
methods:{
fun:function(){
}
}
}
</script>
结果:打印hello
2.动态传递(根据父组件中值的改变,props动态的改变子组件中的值)
父组件
<template>
<div>
<input v-model="message">
<!--将childmessage与message通过v-bind指令绑定!-->
<child v-bind:childmessage="message"></child>
</div>
</template>
<script>
import child from "./components/child.vue"
export default{
//构建child组件
components:{
child
},
data(){
return {
//初始化message
message:''
}
}
}
</script>
2.子组件
<template>
<div>
<p>childmessage is:{{childmessage}}</p>
</div>
</template>
<script>
export default{
//将childmessage传递给child
props:['childmessage']
}
</script>
结果:两者同步改变
以上所述是小编给大家介绍的vue中使用props传值的方法详解整合网站的支持!
来源:https://blog.csdn.net/yang_da_da/article/details/79550024
标签:vue,props,传值


猜你喜欢
python批量处理打开多个文件
2022-10-21 05:26:47

解决MAC系统升级后虚拟机黑屏问题
2022-08-10 05:37:53

python分布式编程实现过程解析
2023-11-10 21:13:48
mysql中update按照多重条件进行更新处理的方案
2024-01-22 05:14:59

virtualenv介绍及简明教程
2023-07-04 08:46:33
numpy中的transpose函数中具体使用方法
2023-04-28 23:46:44

Vue 解决多级动态面包屑导航的问题
2024-05-02 17:11:19
排版自适应提升可访问性
2009-04-08 12:47:00

Python的Django框架中的数据过滤功能
2022-02-01 05:48:40
利用Django内置的认证视图实现用户密码重置功能详解
2023-09-29 18:57:53
如何利用SQL Server数据库快照形成报表
2009-01-15 11:55:00
Python操作列表的常用方法分享
2021-06-02 12:41:29
JSP实现登录功能之添加验证码
2023-07-16 12:18:09
深入理解Python对Json的解析
2023-10-18 20:01:38

Java实现数据库连接的最详细教程分享
2024-01-28 01:34:15

简单聊一聊SQL中的union和union all
2024-01-18 00:17:17
详解PHP结构型设计模式之桥接模式Bridge Pattern
2023-05-25 06:58:55
用python 批量更改图像尺寸到统一大小的方法
2021-04-04 23:47:42
python 基于Appium控制多设备并行执行
2022-12-11 12:00:06
JS如何获取变量值
2008-05-18 12:52:00