Каков механизм вызова функции из шаблона в Vue js - PullRequest
Новая
       13

Каков механизм вызова функции из шаблона в Vue js

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

Я пытаюсь выучить Vue.js.Я следую учебному пособию на этом сайте https://scrimba.com/p/pZ45Hz/c7anmTk.Отсюда я не понимаю что-то ясное.Не могли бы вы помочь мне понять это, пожалуйста?

Вот код ниже и мое замешательство, а также: 

<div id="app">
        <wizard :name="harry"    :cast="oculus_reparo"     ></wizard>
        <wizard :name="ron"      :cast="wingardium_leviosa"></wizard>
        <wizard :name="hermione" :cast="alohomora"         ></wizard>
    </div>


// emojify returns the corresponding emoji image
function emojify(name) {
    var out = `<img src="emojis/` + name + `.png">`
    return out
}

// cast returns a spell (function) that decorates the wizard
function cast(emoji) {
    var magic = emojify("magic")
    return function (wizard) {
        return wizard + " " + magic + " " + emoji + " " + magic
    }
}


Vue.component("wizard", {
    props: ["name", "cast"],
    template: `<p v-html="cast(name)"></p>`
})

var app = new Vue({
    el: "#app",
    data: {
        harry    : emojify("harry"   ), 
        ron      : emojify("ron"     ),
        hermione : emojify("hermione")
    },
    methods: {
        // oculus_reparo returns a spell (function) that repairs glasses        
        oculus_reparo: cast(emojify("oculus-reparo")),      
        // wingardium_leviosa returns a spell (function) that levitates an object
        wingardium_leviosa: cast(emojify("wingardium-leviosa")),
        // alohomora returns a spell (function) that unlocks a door
        alohomora: cast(emojify("alohomora"))
    }
})

Итак, что я получил, так это то, что я создал компонентименованный мастер, который принимает два свойства - name и cast.name получает значение из данных, и до сих пор я понимаю, что cast вызывает метод с параметром.Таким образом, они оба должны вернуть свое конкретное изображение.Моя первая путаница> Откуда берется мастер и как он показывает изображение data.name?Если это происходит из-за вызова метода в шаблоне, то почему эмодзи возвращает другое изображение?Может кто-нибудь, пожалуйста, помогите мне?

1 Ответ

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

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

wizard глобально регистрируется в Vue Vue.component("wizard", ...).Когда Vue интерпретирует каждый wizard вызов в шаблоне, он заменяет его на <p v-html="cast(name)"></p>, который установлен в определении компонента wizard.Здесь name сопоставляется со свойством, которое устанавливается через :name=.v-html просто говорит о том, что для рендеринга в формате html возвращается значение cast(name), здесь cast - это свойство функции, которое передается компоненту, а не функция cast, определенная локально.Все после этого происходит так, как вы ожидаете, когда emojify возвращает шаблонный литерал, который передается в cast, который затем возвращает функцию, которая объединяет эмодзи и другие свойства.

...