Vue3父子组件通信

一、Vue3父子组件通信v-model

在Vue3中，v-model不再是语法糖，而是一个API。v-model指令等价于将value prop和input事件绑定到组件上。通过在组件内部添加model选项，让组件支持v-model。

//子组件
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: {
    value: String
  },
  model: {
    prop: 'value',
    event: 'input'
  }
}
</script>

//父组件
<template>
  <child-component v-model="message" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

二、Vue3父子组件通信子组件如何接收

Vue3中的父子组件通信，仍然可以使用props互相通信。子组件需要通过props接收从父组件传来的数据。在Vue3中，为了避免props的类型错误和必需性问题，可以使用标签中的属性validation选项，进行数据验证。

//子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

//父组件
<template>
  <child-component :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello, child component!'
    }
  }
}
</script>

三、Vue3父子组件方法调用

Vue3中，父组件可以通过$refs或$children属性来调用子组件中的方法。方法需要在子组件中暴露出来，以便父组件可以访问到。

//子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    greet() {
      console.log('Hello from the child component!');
    }
  }
}
</script>

//父组件
<template>
  <child-component ref="child" :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello, child component!'
    }
  },
  mounted() {
    this.$refs.child.greet();
  }
}
</script>

四、Vue父子组件通信规则

在Vue中，组件的通信遵循一定的规则。

• 父组件可以向子组件传递props
• 子组件可以向父组件触发事件
• 父组件可以通过$refs或$children属性操作子组件
• 兄弟组件之间需要通过共同的父组件传递props或触发事件进行通信

五、Vue3父子组件双向绑定

除了v-model，Vue3组件中也可以使用自定义事件以及prop的形式来实现双向绑定。

//子组件
<template>
  <input :value="message" @input="handleChange" />
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    handleChange(event) {
      this.$emit('update:message', event.target.value);
    }
  }
}
</script>

//父组件
<template>
  <child-component :message="message" @update:message="handleMessageUpdate" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleMessageUpdate(value) {
      this.message = value;
    }
  }
}
</script>

六、Vue2父子组件通信

在Vue2中，父子组件通信仍然可以使用props和$emit来实现。

//子组件
<template>
  <button @click="handleClick">{{ buttonText }}</button>
</template>

<script>
export default {
  props: {
    buttonText: String
  },
  methods: {
    handleClick() {
      this.$emit('button-click');
    }
  }
}
</script>

//父组件
<template>
  <child-component :buttonText="buttonText" @button-click="handleButtonClick" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      buttonText: 'Click me!'
    }
  },
  methods: {
    handleButtonClick() {
      console.log('Button clicked!');
    }
  }
}
</script>

七、父子组件通信Vue

在Vue中，父子组件通信是Vue应用中十分常见的情况。

//子组件
<template>
  <p>{{ message }}</p>
</template>

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

//父组件
<template>
  <child-component message="Hello, child component!" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

八、Vue子传父组件通信

在Vue中，子组件可以向父组件传递消息，使用$emit触发事件从子组件向父组件传递数据。

//子组件
<template>
  <button @click="handleClick">{{ buttonText }}</button>
</template>

<script>
export default {
  props: {
    buttonText: String
  },
  methods: {
    handleClick() {
      this.$emit('button-click', 'Child component says hello!');
    }
  }
}
</script>

//父组件
<template>
  <child-component :buttonText="buttonText" @button-click="handleButtonClick" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      buttonText: 'Click me!'
    }
  },
  methods: {
    handleButtonClick(message) {
      console.log(message);
    }
  }
}
</script>

九、Vue父子组件生命周期顺序

Vue中，组件的生命周期函数在父子组件之间有着不同的顺序。

//子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    message: String
  },
  beforeCreate() {
    console.log('Child component: beforeCreate()');
  },
  created() {
    console.log('Child component: created()');
  },
  beforeMount() {
    console.log('Child component: beforeMount()');
  },
  mounted() {
    console.log('Child component: mounted()');
  },
  beforeUpdate() {
    console.log('Child component: beforeUpdate()');
  },
  updated() {
    console.log('Child component: updated()');
  },
  beforeUnmount() {
    console.log('Child component: beforeUnmount()');
  },
  unmounted() {
    console.log('Child component: unmounted()');
  }
}
</script>

//父组件
<template>
  <child-component message="Hello, child component!" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  beforeCreate() {
    console.log('Parent component: beforeCreate()');
  },
  created() {
    console.log('Parent component: created()');
  },
  beforeMount() {
    console.log('Parent component: beforeMount()');
  },
  mounted() {
    console.log('Parent component: mounted()');
  },
  beforeUpdate() {
    console.log('Parent component: beforeUpdate()');
  },
  updated() {
    console.log('Parent component: updated()');
  },
  beforeUnmount() {
    console.log('Parent component: beforeUnmount()');
  },
  unmounted() {
    console.log('Parent component: unmounted()');
  }
}
</script>