Vue父组件与子组件之间数据的互传

由 月琳 发布 |238次浏览

子组件向父组件传值

  1. 子组件
<script>
...
  methods:{
    send:function(){
      this.$emit('doSomething', this.xxx)
      // 通过 $emit 将子组件变量传给父组件,doSomething(自定义的)函数在父组件中定义
    }
  }
...
</script>
  1. 父组件
<template>
  <!-- 定义子组件传($emit)出来的函数-->
  <child v-on:doSomething="myDoSomething"></child>
</template>

<script>
...
  methods: {
    // 实现子组件提供的函数,获取子组件的变量
    myDoSomething: function(value){
      console.log(value);
    }
  }
...
</script>

父组件向子组件传值

  1. 子组件
<script>
...
  // 子组件通过 props 将变量与父组件关联
  props: {
    name: {
      type: String,
      default:'no name'
    }
  }
...
</script>
  1. 父组件
<template>
  <!-- :xxx(即 v-bind:xxx),将子组件props中的变量 与 父组件定义的变量 关联/绑定 -->
  <child :name="myName"></child>
</template>
<script>
...
  data(){
    return{
      // 设置绑定数据
      myName:'请输入...'
    }
  }
...
</script>

暂无评论

发表评论