网络编程
位置：首页>> 网络编程>> JavaScript>> vue中使用props传值的方法

vue中使用props传值的方法

作者：yang_da_da　　发布时间：2024-05-03 15:10:50　

标签：vue,props,传值

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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com