SvelteJS: передача данных компонентам - PullRequest
Новая
       78

SvelteJS: передача данных компонентам

0 голосов
/ 18 сентября 2018

В настоящее время я выполняю миграцию приложения Laravel, которое использует VueJS, на SvelteJS (замените часть Vue на Svelte).

С помощью VueJS я могу легко отправлять реквизиты для компонентов, установленных на странице: 

<users :name="John Doe"></users>

Затем позже получите доступ к названию реквизита в компоненте.

В Svelte я могу передавать реквизиты и обращаться к ним только в компоненте, когда они вложены.

Компонент приложения: Я могу сослаться на пользовательский компонент и отправить реквизиты 

<h1>Hello {name} - { count }</h1>

<h1>Employees of VONIDI</h1>

<Users villain="Jean Claude Van Damme" hero={employees} />

<ul>
    {#each employees as employee}
        <li><a target="_blank" href={employee}>{employee}</a></li>
    {:else}
        <li>No employee :(</li>
    {/each}
</ul>

<form on:submit="processForm(event)">
    <input bind:value=form.name type=text>
    <input ref:date id="date" bind:value=form.date type=text>
    <label>
        <input type='checkbox' bind:group='form.colours' value='red'>
        red
    </label>

    <label>
        <input type='checkbox' bind:group='form.colours' value='blue'>
        blue
    </label>

    <button type=submit>Say hello</button>
</form>

<button on:click="set({ count: count + 1 })"> +1 </button>
<button on:click="set({ count: count - 1 })"> -1 </button>

<style>
    h1 {
        color: purple;
    }
</style>

<script type="text/javascript">
import axios from 'axios';
import flatpickr from 'flatpickr';
import "flatpickr/dist/themes/dark.css";


    export default {

        components: {
            Users: './users.svelte'
        },

        data() {
            return {
                count: 0,
                name: 'WORLD',
                employees: [],
                form: {
                    name: '',
                    colours: [],
                    date: ''
                }
            };
        },

        oncreate() {
            console.log('Created TAG!');
            this.loadStudents();
            console.log(this.options);

            flatpickr('#date', {
                mode: "range",
                minDate: "today",
                dateFormat: "Y-m-d",
                disable: [
                    function(date) {
                        // disable every multiple of 8
                        return !(date.getDate() % 8);
                    }
                ]
            });
        },

        methods: {
            getStudents() {
                return axios.get('/employees');
            },

           async loadStudents() {
                let response = await this.getStudents();
                this.set({
                    employees: response.data
                });

                const emp = this.get();

                console.log(emp);
            },

            processForm(event) {
                event.preventDefault();

                const tagline = this.get();
                console.log(tagline);
                alert(`Hello ${tagline.form.name}!`);
            }
        }
    };
</script>

Пользовательский компонент: 

<h4>Employees from User Tag: {hero}</h4>
<h2>Villain: { villain }</h2>

<script>
    export default {
        tag: 'users-tag',

        oncreate() {
            console.log('User component created!')
            console.log( this.get() )
        }
    };
</script>

Но я не могу понять, как отправлять реквизиты компонентам, которые не являются вложенными,Например: в автономном пользовательском компоненте я не могу отправить реквизит. 

<users villain="Jean Claude Van Damme" hero="One"></users>

Я всегда получаю неопределенную ошибку для значения проп.Есть идеи, как мне этого добиться?

Спасибо

1 Ответ

0 голосов
/ 19 сентября 2018

Если я правильно понимаю, вы пытаетесь изменить данные в компоненте после его инициализации. 

When you initialize the component you do something like:
var mything= new Thing({
  target: someplace,
  data: {text:"some text",status:" works good"}
});

Позже, если вам нужно изменить данные, вы можете сделать: 

mything.set({text:"new text");
...