Передача данных между компонентами vue

внешний интерфейс Vue.js
Передача данных между компонентами vue

В последнее время столкнулся с проблемами в сортировке кода в проекте и передаче данных между компонентами, поэтому сделал такое резюме, если что не так прошу поправить.

Как родительские компоненты передают данные дочерним компонентам

Родительский компонент может пройтиPropПередайте данные дочерним компонентам.

Здесь следует отметить следующее:

  • PropЭто односторонняя привязка: когда свойство родительского компонента изменяется, оно будет распространяться на дочерний компонент, но не наоборот. Это необходимо для предотвращения непреднамеренного изменения состояния родительского компонента дочерними компонентами, что предотвращает неразборчивость потока данных приложения.

  • Каждый раз, когда родительский компонент обновляется, все дочерние компонентыPropбудет обновлено до последнего значения. Это означает, что вы не должны изменять свойства внутри дочерних компонентов. Если вы это сделаете, Vue предупредит вас в консоли.

В двух случаях легко устоять перед искушением изменить данные в свойстве:

  • PropПосле передачи в качестве начального значения дочерний компонент хочет использовать его как локальные данные;

Решение: определите локальную переменную и используйтеpropчтобы инициализировать его значением:

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}
  • PropОн передается как необработанные данные и обрабатывается подкомпонентами в другие выходные данные.

Обходной путь: определите вычисляемое свойство, которое обрабатывает значение свойства и возвращает:

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

PS: содержимое вышеvueВ документе сказано, что я просто вытащил те проблемы, с которыми столкнулся в проекте.Связь

Каштан:

// 父组件 index.vue
<template>
    <div class="content">
        <child :lists="lists"></child>
    </div>
</template>
<script>
    import child from './child.vue';
    export default {
        components: {
            child
        },
        data() {
            return {
                lists: []
            };
        },
        mounted() {
            this.lists = [{
                name: '01',
                content: 'hi,'
            }, {
                name: '02',
                content: 'my name is Ellyliang'
            }];
        }
    };
</script>

// 子组件 child.vue
<template>
    <ul class="content">
       <li v-for="(list, index) in getLists" :key="index" v-html="list.name + list.content"></li>
    </ul>
</template>
<script>
    export default {
        props: ['lists'],
        data() {
            return {
                getLists: this.lists
            };
        },
        mounted() {
            this.getLists.push({
                name: '03',
                content: '不要在乎内容，我就是测试'
            });
        }
    };
</script>

Как дочерние компоненты передают данные родительским компонентам

Подкомпоненты доступны черезvm.$emitПередать данные родительскому компоненту

vm.$emitЧто это такое

Запускает событие в текущем экземпляре. Дополнительные параметры передаются обратному вызову слушателя.Связь

Каштан:

// 父组件 index.vue
<template>
    <div class="content">
        <child :lists="lists" @listenToChild="getChildMsg"></child>
    </div>
</template>
<script>
    import child from './child.vue';
    export default {
        components: {
            child
        },
        data() {
            return {
                lists: []
            };
        },
        mounted() {
            this.lists = [{
                name: '01',
                content: 'hi,'
            }, {
                name: '02',
                content: 'my name is Ellyliang'
            }];
        },
        methods: {
            getChildMsg(val) {
                alert(val);  // 'hello'
            }
        }
    };
</script>

// 子组件 child.vue
<template>
    <div class="content">
        <ul class="lists">
            <li v-for="(list, index) in getLists" :key="index" v-html="list.name + list.content"></li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: ['lists'],
        data() {
            return {
                getLists: this.lists
            };
        },
        mounted() {
            this.getLists.push({
                name: '03',
                content: '不要在乎内容，我就是测试'
            });
            
            setTimeout(() => {
                this.$emit('listenToChild', 'hello');
            }, 15000);
        }
    };
</script>

Удобно ли дочерним компонентам передавать данные родительским компонентам? Метод реализации находится в дочернем компоненте$emitданные, а затем передавать события в родительский компонент@事件名получить значение.

Event Bus

Метод шины событий может обрабатывать не только передачу компонентов «родитель-потомок», передачу компонентов «потомок-родитель», но также обрабатывать передачу значений между горизонтальными компонентами. Способ сделать это в глобальномnewОдинvueэкземпляр, а затем передать значение вbus, то естьlet bus = new vue();. через этот глобальныйbusсередина$emit, $onИ так далее, чтобы добиться передачи данных. С этим есть проблема, потому чтоevent busУдобно обрабатывать передачу данных, куда бы они ни пошли, что приводит к злоупотреблениям, что затрудняет понимание кода.

Реализация шины событий

let bus = new Vue();
// 触发组件 A 中的事件
bus.$emit('id-selected', 1);
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
});

Информацию об упаковке и использовании конкретных компонентов см.vue-bus.

другой путь

Кроме трех вышеперечисленных способов, есть ещеvuexЧтобы разобраться с передачей данных, я не обращался, всем должно быть интересно и узнать самому.

Категории