vue中使用props传值

最新推荐文章于 2025-12-02 21:51:15 发布

原创最新推荐文章于 2025-12-02 21:51:15 发布 · 1.1w 阅读

12 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了Vue.js中两种常见的父子组件间的数据传递方式：静态传值和动态传值，并展示了如何实现这两种传值方式的具体代码示例。

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>