Если вы используете Vue.js для разработки проекта, вы должны использовать метод разработки на основе компонентов.Этот метод действительно приносит определенное удобство в разработке и обслуживании, но если он включает в себя взаимодействие передачи данных и состояния между компонентами, это хлопотно , особенно для страниц с большим количеством форм.
Здесь я буду описывать методы обработки, которые я обычно использую. В этой статье в основном описывается передача данных между родительскими и дочерними компонентами. Неродительские и дочерние компоненты в основном обрабатываются Vuex. Эта статья пока не будет объяснять это.
Как и решение, приведенное в документе, родительский компонент передает данные дочернему компоненту в основном черезprops, дочерний компонент передает данные родительскому компоненту в основном через триггеры$emit(), но использование немного отличается.
1. Передать базовые данные типа
Когда содержимое подкомпонента невелико, данные основного типа будут передаваться напрямую, обычно String, Number, Boolean.
Давайте посмотрим на пример:
<!-- 父组件 parent.vue -->
<template>
<div class="parent">
<h3>问卷调查</h3>
<child v-model="form.name"></child>
<div class="">
<p>姓名：{{form.name}}</p>
</div>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: {
child
}，
data () {
return {
form: {
name: '请输入姓名'
}
}
}
}
</script><!-- 子组件 child.vue -->
<template>
<div class="child">
<label>
姓名：<input type="text" :value="currentValue" @input="changeName">
</label>
</div>
</template>
<script>
export default {
props: {
// 这个 prop 属性必须是 valule，因为 v-model 展开所 v-bind 的就是 value
value: ''
},
methods: {
changeName (e) {
// 给input元素的 input 事件绑定一个方法 changeName
// 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
this.$emit('input', e.target.value)
}
}
}
</script>Привязать метод к событию ввода дочернего компонентаchangeName, пользовательское событие запускается каждый раз, когда выполняется этот методinputи передайте значение поля ввода.
родительский компонент черезv-modelДирективы связывают значение для получения данных, переданных от дочерних компонентов. Но это только родительский компонент для ответа на данные дочернего компонента.Если дочерний компонент также должен реагировать на данные, переданные родительским компонентом, вам необходимо определить свойство props для дочернего компонента.value, и это свойство должно бытьvalue, никакие другие слова не могут быть написаны.
v-model на самом деле является синтаксическим сахаром.Компоненты ввода формы с использованием пользовательских событий.
2. Передача данных ссылочного типа
Когда в подкомпоненте много контента, например, подкомпонент имеет несколько элементов формы, если вы также привязываете значения к каждому элементу формы, как указано выше, вам придется писать много повторяющегося кода. Поэтому в это время обычно передается объект.Основной принцип передачи значения остается тем же, но способ записи будет немного другим.
Или сначала посмотрите на код:
<!-- 父组件 parent.vue -->
<template>
<div class="parent">
<h3>问卷调查</h3>
<child :formData.sync="form"></child>
<div class="">
<p>姓名：{{form.name}}</p>
</div>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: {
child
},
data () {
return {
form: {
name: '请输入姓名',
age: '21'
}
}
}
}
</script><!-- 子组件 child.vue -->
<template>
<div class="child">
<label>
姓名：<input type="text" v-model="form.name">
</label>
<label>
年龄：<input type="text" v-model="form.age">
</label>
<label>
地点：<input type="text" v-model="form.address">
</label>
</div>
</template>
<script>
export default {
data () {
return {
form: {
name: '',
age: '',
address: ''
}
}
},
props: {
// 这个 prop 属性接收父组件传递进来的值
formData: Object
},
watch: {
// 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行绑定
// 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form
formData: {
immediate: true,
handler (val) {
this.form = val
}
}
},
mounted () {
// props 是单向数据流，通过触发 update 事件绑定 formData，
// 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
// 父组件在绑定 formData 的时候，需要加上 .sync
this.$emit('update:formData', this.form)
}
}
</script>props — это односторонний поток данных.Когда нам нужно связать свойства в props в двух направлениях, нам нужно использовать.syncмодификатор, см.модификатор .sync, которые здесь повторяться не будут.
Здесь следует отметить, что props не могут быть изменены непосредственно в vue, поэтому, если мы хотим передать значения родительскому компоненту, нам все равно нужно изменить значения в data.Prop существует только как посредник для вызовов между родительским и ребенок.
Кроме того, если мы хотим предварительно просмотреть данные, переданные родительским компонентом, нам нужно передатьwatchСлушайте изменения свойств и передайте значение при инициализации дочернего компонента.
Уведомление:Я вставляю дочерний компонентthis.$emit('update:formData', this.form)помещатьmountedсреди них причина состоит в том, чтобы избежать в каждомinputПользовательское событие запускается в событии ввода тега, но предпосылка этого письма такова:父子组件都要共用一个对象.
Это код выше, используемый в родительском компоненте:formData.sync="form"При привязке значенияformявляется объектом, и пользовательское событие в дочернем компоненте срабатываетthis.$emit('update:formData', this.form),this.formТакже должен быть объект.
Здесь также следует отметить, что если есть несколько подкомпонентов, использующих объект, такого способа записи следует избегать, потому что один компонент изменяет данные этого объекта, поэтому другие подкомпоненты также будут изменяться.
Поэтому, когда я его использую, я назначаю каждому подкомпоненту свой собственный объект, например:
data () {
return {
parentObject: {
child_1_obj: {},
child_2_obj: {},
}
}
}Это данные, определенные в родительском компоненте, конечно, имя не будет восприниматься таким образом.
конец
Мне нечего сказать. Я все еще нахожусь на стадии использования Vue, и я недостаточно знаю о базовых вещах. Я действительно хочу прочитать исходный код, но я всегда просто думаю об этом.. Все думают, что с этим что-то не так, мол, давайте общаться друг с другом.