Vue组件传参---父子组件传参

一、父组件向子组件传参

1、父组件代码：

• 注意：因为html对大小写不敏感，所以componentA组件注册后使用时采用component-a这种写法。

<template>
  <div class="wrapper">
    <h3>这里是父组件</h3>
    
    //使用子组件并在子组件中自定义数据FaData，此行为核心代码
    <component-a :FaData="msg"></component-a>
    
  </div>
</template>

<script>

//引入组件，并命名为 componentA 
import componentA from '@/components/ComponentA.vue'

export default {
  components: {
  
    //组件引入后需注册才能使用
    componentA
    
  },
  data () {
    return {
      msg:'我是父组件传递给子组件的数据'
    }
  }
}
</script>

2、子组件代码

<template>
  <div class="wrapper">
      <h3>这里是子组件</h3>
      <div>{{FaData}}</div>
  </div>
</template>

<script>
export default {

  //子组件使用props接收父组件传递过来的值，props内的值使用方法与data中值相同
  props: ['FaData'],
  
  data () {
    return {
    }
  }
}
</script>

二、子组件向父组件传参

1、子组件代码

<template>
  <div class="wrapper">
    <h3>这里是子组件</h3>
    
    //点击按钮向父组件传递参数
    <button @click="sendData">点击向父组件传递参数</button>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg2: "我是子组件传递过来的参数"
    };
  },
  methods: {
    sendData() {
      //此处为核心代码使用$emit自定义事件并传递参数msg2
      this.$emit("sendMsg", this.msg2);
    }
  }
};
</script>

2、父组件代码

<template>
  <div class="wrapper">
    <h3>这里是父组件</h3>
    
    //此处为核心代码@绑定子组件中自定义的sendMsg事件
    <component-a @sendMsg="getData"></component-a>
    
    //此处显示子组件传递过来参数
    {{msg}}
    
  </div>
</template>

<script>
import componentA from "@/components/ComponentA.vue";
export default {
  components: {
    componentA
  },
  data() {
    return {
      msg: ""
    };
  },
  methods: {
  
   //核心代码，接收子组件传递过来的值
    getData(val) {
      this.msg = val;
    }
    
  }
};
</script>

---

至此父子组件相互传递参数介绍完毕！