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>

以上是Vue3父子組件通信的一些細節，希望對大家有所幫助。