Vuejs——组件——props数据传递

Posted 2020-09-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuejs——组件——props数据传递相关的知识，希望对你有一定的参考价值。

父组件向子组件传递：

wapper.vue父组件

<template>
  <div>
    <input type="text" v-model="msg">
    <br>
   <!--  将子控件属性inputValue与父组件msg属性绑定 -->
    <child :inputValue="msg"></child>
  </div>
</template>
<style>

</style>
<script>
  export default{
    data(){
      return {
        msg: ‘请输入‘
      }
    },
    components: {
      child: require(‘./Child.vue‘)
    }
  }
</script>
child.vue子组件

<template>
  <div>
    <p>{{inputValue}}</p>
  </div>
</template>
<style>

</style>
<script>
    export default{
        props: {
          inputValue: String
        }
    }
</script>

以上是关于Vuejs——组件——props数据传递的主要内容，如果未能解决你的问题，请参考以下文章

将 VueJS Prop 传递给 TypeScript 类组件

将 json 对象一个组件传递给另一个 vuejs