其他分享
首页 > 其他分享> > 父组件向子组件传值

父组件向子组件传值

作者:互联网

vue中父组件向子组件传值
1、定义父组件

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

2、定义子组件

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

总结:
父组件想要向子组件传值,那么必然有一个地方是相互衔接的,意思就是我们要找到父组件与子组件之间的那个契合点。
契合点就是:子组件引入的地方

那么我们可以自定义一个属性来存放父组件向子组件传递的数据。

这样,父组件就把值传出去了,那么就回到子组件来接收这个值

到这里,子组件就拿到了父组件传递过来的值了
子组件使用该值

转载于:https://www.kancloud.cn/yr_zkino/vue_vue/851100

标签:向子,vue,契合点,child,组件,传值
来源: https://blog.csdn.net/chuziyan/article/details/122107937