Vue组件之间如何传值

Vue父子组件之间如何传值

一、父传子组件参数传递
1）、在父组件的子组件标签中使用v-bind绑定一个属性，挂载绑定属性的变量
2）、在子组件中通过props来接收数据，props可以是数组也可以是对象，接收的数据可以直接使用，props：[‘属性名’]， props：{属性名：数据类型}

//父组件
<template>
  <div>
      <h3>这是父组件内容区
      <Child :sendChild='parentValue' </Child>
      </h3>
 </div>
</template>`

<script>
import Child from './Child.vue'
export default {
  name: 'parent',
  data() { 
    return {
        parentValue:'--这是父组件的值100--',
    }
  },
  components:{
      Child
  },
 }
</script>
``

```html
//子组件
<template>
  <div>
        <h3 style="color:skyblue"> 父组件的数值为{{sendChild}}</h3>
        <!-- <button @click="clickEvent">点击给父组件传递参数</button> -->
 </div>
</template>

<script>
export default {
  name: 'Child',
  props:['sendChild'],
  data() { 
    return {
        childValue:'--这是子组件的值200--'
    }
  },
 }
</script>

二、子传父参数传递
1）在父组件的子组件标签上自定义一个事件，然后绑定所需方法
2）在子组件中的方法通过调用this.$emit（‘事件’，参数）来触发父组件中自定义事件，数据以参数的形式传递过去

//父组件
<template>
  <div>
      <h3>这是父组件内容区
      <Child @sendParentValue='receiveChildValue'></Child>
      <h2>这是子组件的值-----{{childValue}}</h2>
      </h3>
 </div>
</template>
<script>
import Child from './Child.vue'
export default {
  name: 'parent',
  data() { 
    return {
        parentValue:'--这是父组件的值100--',
        childValue:''
    }
  },
  components:{
      Child
  },
 }
</script>

//子组件
<template>
  <div>
<button @click="clickEvent">点击给父组件传递参数</button> 
 </div>
</template>

<script>
export default {
  name: 'Child',
  props:['sendChild'],
  data() { 
    return {
        childValue:'--这是子组件的值200--'
    }
  },
  components:{
  },
  methods:{
       clickEvent(){
this.$emit('sendParentValue',this.childValue)
       }
  },
 }
</script>

总结

无论父传子参数（props）还是子传父参数（$emit），都需要在父组件中的子组件标签中绑定props对应父组件中的属性变量，或者绑定自定义事件，props方式在子组件中通过props（两种方式1、数组props：[‘属性名’]，2、对象props：{属性名：数据类型}）接收参数，并在子组件中引用。 $emit方式则是在子组件中的方法中通过$emit（this.$emit（‘自定义事件’，子组件的数据））触发父组件中自定义事件，并将子组件的数据以参数的形式传递过去，在父组件中的自定义事件调用的方法中即可将子组件数据作为参数并使用。