vue父子组件传参（子组件调用父组件方法，父组件调用子组件方法或属性，子组件修改prop值）

一、父组件向子组件传递参数

父组件通过在子组件的标签上使用v-bind或简写的:语法，将父组件的parentMessage作为message的值传递给子组件。子组件通过定义props接收传递的参数，并在模板中渲染该参数的值。

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent component',
    };
  },
};
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

二、vue子组件调用父组件的方法

子组件通过按钮的点击事件@click来调用triggerEvent方法，在该方法中使用this.$emit触发了名称为child-event的自定义事件。

在父组件中，使用@child-event绑定父组件的parentMethod方法来监听子组件触发的自定义事件。

在子组件的emit事件中，可以传递额外的参数，供父组件的方法使用。例如：this.$emit('child-event', data)，其中data是传递的参数，父组件的方法可以通过监听事件时的回调函数接收这些参数。

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent @child-event="parentMethod" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    parentMethod() {
      console.log('Method called from child component');
    },
  },
};
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <button @click="triggerEvent">触发父组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      // 不带参
      this.$emit('child-event'); // 触发父组件的自定义事件
      // 带参
      this.$emit('child-event'， '222'); // 触发父组件的自定义事件
    },
  },
};
</script>

三、vue父组件调用子组件方法或属性

在Vue中，父组件可以通过ref引用子组件，并通过该引用调用子组件的方法或访问子组件的属性。

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent ref="childComponentRef" />
    <button @click="callChildMethod">调用子组件方法</button>
    <p>{{ childComponentMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      childComponentMessage: '',
    };
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponentRef.childMethod(); // 调用子组件的方法
      this.childComponentMessage = this.$refs.childComponentRef.childProperty; // 访问子组件的属性
    },
  },
};
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <h3>子组件</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childProperty: 'Message from child component',
    };
  },
  methods: {
    childMethod() {
      console.log('Method called from parent component');
    },
  },
};
</script>

四、vue子组件修改prop值

1、通过父传子，子调用父方法传参数实现

<!-- 父组件 -->
<template>
 	<child-view :num="num" @updateNum="updateNum"></child-view>
</template>
<script>
 import childView from './assembly/child'
 export default {
    components: {childView},
    data() {
      return {
        num: 2
		}
	},
	methods: {
      updateNum(num){
        this.num = num
      }
 }
 </script>

<!-- 子组件 -->
<<template>
  <div>
    <p>父传过来的值：{{num}}</p>
    <button @click="changeNum">加一</button>
  </div>
</template>

<script>
  export default {
    name: 'child',
    props:{
      num: {
        type:Number,
        default: 0
      }
    },
    methods:{
      changeNum(){
        this.$emit("updateNum",this.num + 1)
      }
    }
  }

2、通过.sync修饰符以及$emit配合update:实现，该方法只有vue2可以使用

<!-- 父组件 -->
<template>
 	<child-view :num.sync="num"></child-view>
</template>
<script>
 import childView from './assembly/child'
 export default {
    components: {childView},
    data() {
      return {
        num: 2
		}
	}
 }
 </script>

<template>
  <div>
    <p>父传过来的值：{{num}}</p>
    <button @click="changeNum">加一</button>
  </div>
</template>

<script>
  export default {
    name: 'child',
    props:{
      num: {
        type:Number,
        default: 0
      }
    },
    methods:{
      changeNum(){
        this.$emit("update:num",this.num + 1)
      }
    }
  }
</script>

3、使用v-modal绑定一个数据源

<!-- 父组件 -->
<template>
 	<child-view v-modal="num"></child-view>
</template>
<script>
 import childView from './assembly/child'
 export default {
    components: {childView},
    data() {
      return {
        num: 2
		}
	}
 }
 </script>

<template>
  <div>
    <p>父传过来的值：{{num}}</p>
    <input type="text" :value="value" @input="$emit('input',$event.target.value)">
  </div>
</template>

<script>
  export default {
    name: 'child',
    props:["value"]
  }
</script>