Предисловие: Vue2 имеет много способов передачи значений между компонентами, будь то собеседование или ежедневная разработка, но на самом деле наиболее распространенным является передача значений между родительским и дочерним компонентами, а vuex, давайте сегодня подробно объясним передачу значений между отцом и сыном;
1. Передать значение от родителя к дочернему
В родительском компоненте используйте метку дочернего компонента и передайте данные дочернему компоненту через реквизиты.
В дочернем компоненте определите параметр props для получения данных, переданных родительским компонентом.
Данные родительского компонента будут переданы дочернему компоненту через опцию props, и дочерний компонент может использовать данные напрямую.
родительский компонент:
<template>
<div>
<child-component :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent component',
};
},
components: {
ChildComponent,
},
};
</script>
Сборка:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true,
},
},
};
</script>
В приведенном выше примере родительский компонент передал данные parentMessage дочернему компоненту через свойство: message. Дочерний компонент определяет свойство с именем message через параметр props, получает данные, переданные родительским компонентом, и отображает их в шаблоне.
2. Ребенок передает значение родителю
В дочернем компоненте запустите пользовательское событие с помощью метода $emit и передайте данные для передачи родительскому компоненту.
В родительском компоненте отслеживайте событие, инициированное дочерним компонентом с помощью инструкции v-on, и выполняйте соответствующий метод при срабатывании для получения переданных данных.
Сборка:
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child component');
},
},
};
</script>
родительский компонент:
<template>
<div>
<child-component @message-sent="handleMessage" />
<p>{
{ receivedMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
receivedMessage: '',
};
},
components: {
ChildComponent,
},
methods: {
handleMessage(message) {
this.receivedMessage = message;
},
},
};
</script>
В приведенном выше примере дочерний компонент запускает метод sendMessage нажатием кнопки и запускает событие с именем message-sent через метод this.$emit и передает данные для передачи родительскому компоненту в качестве параметра. Родительский компонент отслеживает событие, инициированное дочерним компонентом через @message-sent, и при срабатывании выполняет метод handleMessage, получает переданные данные и присваивает их ReceiveMessage.
В родительском компоненте .syncмодификаторы могут использоваться для привязки переменной к свойству дочернего компонента. Когда дочерний компонент изменяет это свойство, переменная родительского компонента будет соответствующим образом обновлена, а когда родительский компонент изменяет эту переменную, свойство дочернего компонента будет соответствующим образом обновлено.
Вот .syncпример использования модификаторов:
родительский компонент:
<template>
<div>
<child-component :message.sync="parentMessage" />
<p>Parent Message: {
{ parentMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent component',
};
},
components: {
ChildComponent,
},
};
</script>
Сборка:
<template>
<div>
<input type="text" v-model="message" />
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true,
},
},
};
</script>
В приведенном выше примере родительский компонент использует двустороннюю привязку свойств :message.syncродительского компонента parentMessageи дочернего компонента . messageИнструкции используются в подкомпонентах для привязки v-modelзначения поля ввода к свойству.message
Теперь, когда дочерний компонент изменяет messageсвойство, родительский компонент parentMessageбудет обновляться соответствующим образом, а когда родительский компонент изменяет свойство parentMessageдочернего компонента, messageсоответственно обновляется.
Следует отметить, что когда .syncмодификатор используется для привязки свойства, дочерний компонент должен $emitинициировать пользовательское событие через метод, чтобы уведомить родительский компонент об обновлении свойства. В приведенном выше примере дочерний компонент $emit('update:message', newValue)обновляет messageсвойство через .
Использование .syncмодификаторов может упростить процесс двусторонней привязки данных между родительским и дочерним компонентами, делая код более кратким и понятным. Однако, поскольку использование .syncмодификаторов привнесет некоторую скрытую логику, их необходимо тщательно продумать и использовать в соответствующих сценариях.