0

На основе стандартного примера пробую реализовать корзину покупок. В некоторых местах сразу же возникло не понимание.

app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Document</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div id="app"></div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Что за магическая конструкция render: h => h(App)? Правильно ли я понимаю, что если мы записываем в таком виде, то нам не нужно указывать компонент в app.blade.php? На следующем этапе я планируется подключить Vne Router. Не сыграет ли такой подход мне во вред?

app.js

import Vue from 'vue'
import App from './components/App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

Опять не понятно. Если указать <ProductList><ProductList/>, то будет ошибка, а вот так <ProductList/> - работает. Если не трудно, то помогите пожалуйста разобраться. Одно дело сделать так чтобы это работало, другое понимать как это работает. Спасибо.

App.vue

<template>
    <div id="app">
        <ProductList/>
        <ShoppingCart/>
    </div>
</template>

<script>
    import ProductList from './ProductList.vue'
    import ShoppingCart from './ShoppingCart.vue'

    export default {
        components: {
            ProductList,
            ShoppingCart
        }
    }
</script>

2 ответа 2

1

1) Правильно, вы сообщаете vuejs, что компонент App является корневым. Он должен будет содержать в себе <router-view> для работы с vue-route. Далее при загрузке страницы приложение заинжектится по селектору #app.

2) Это не может никак влиять на ошибку. Правила именования не нарушены. Короткий вариант <ProductList/> используется если компонент не нуждается во входных параметрах. UPD: у вас ошибка действительно. Закрывающий слэш должен быть перед началом селектора.

<ProductList></ProductList>

Можно самостоятельно задавать нужный вам селектор

<script>
    import ProductList from './ProductList.vue'
    import ShoppingCart from './ShoppingCart.vue'

    export default {
        components: {
            'product-list':ProductList,
            'shopping-cart': ShoppingCart
        }
    }
</script>
2
0

Можно и не именовать компоненты

<script>
    import ProductList from './ProductList.vue'
    import ShoppingCart from './ShoppingCart.vue'

    export default {
        components: {
            ProductList,
            ShoppingCart
        }
    }
</script>
<template>
<div>

<product-list></product-list>
<shopping-cart></shopping-cart>

</div>
</template>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.