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