Как заставить видеть функцию Vue.componenta?

Question

[Алексей Повольнов]

Здравствуйте.

Vue

// Экземпляр создан в другом файле
Vue.component("bla-bla", function(){
  computed: {
    move: function() {
      return 'название другого компонента';
    }
  }
});

HTML
<component v-bind:is="move"></component>

И вот такую ошибку он выдает:
move is not defined

Как я понимаю, эта функция должна быть в главном экземпляре, но она у меня должна быть именно в компоненте, как мне заставить видеть ее?

Answer 1

[levchak0910]

v-bind:is должно быть:

the name of a registered component, or
a component’s options object

docs
-----

Vue.component("parent", {
    template:`
        <div>
            <menu-avtr @change-tab="onChangeTab"></menu-avtr> 
            <component :is="componentName"></component>
        </div>
    `,
    data: () => ({
        componentName: "form-inp",
    }),
    methods: {
        onChangeTab(name) {
            this.componentName = name; 
        },
    },
});
Vue.component("menu-avtr", {
    data: function() {
      return {
        punktsMenuAvtr: [ {text: 'Вход', tabs: "inp"}, {text: 'Регистрация', tabs: "reg"} ],
        currentTab: "inp"
      }
    },
    template: '<menu><li v-for="punkt in punktsMenuAvtr" @click="setTab(punkt.tabs)" v-bind:data-active=" currentTab === punkt.tabs ? true : false ">{{ punkt.text }}</li></menu>',
    methods: {
        setTab(tab) {
            this.currentTab = tab;
            this.$emit("change-tab", `form-${tab}`)
        },
    },
  });

Comments

[Алексей Повольнов]

то есть мой компонент не зарегистрирован?

[levchak0910]

Bам нужно передать компонент или название компонента в :is, а передаете функцию

[Алексей Повольнов]

levchak0910, так в том то и дело что функция возвращает название компонента

[levchak0910]

Vue.component("parent", {
    template:`
        <div>
            <component :is="componentName"></component>
        </div>
    `,
    computed: {
        componentName: () => someCondition ? "component1" : "component2"
    },
});
Vue.component("component1", {
    template:`
        <div>
            <h1>component 1</h1>
        </div>
    `
});
Vue.component("component2", {
    template:`
        <div>
            <h1>component 2</h1>
        </div>
    `,
});

[Алексей Повольнов]

levchak0910, этот computed в самом компоненте, я выложил весь код :D

Answer 2

[Evgeny Kulakov]

Вот в каком шаблоне компонента у вас вот это: <component v-bind:is="move"></component>
Туда и добавить функцию move и скобки не забыть поставить, чтобы ее вызов произошел: <component v-bind:is="move()"></component>

Comments

[Алексей Повольнов]

у меня функция в другом компоненте

[Evgeny Kulakov]

Ну, перенесите ее)

[Алексей Повольнов]

Evgeny Kulakov, нельзя :D,я код ниже скинул

[Evgeny Kulakov]

Алексей Повольнов, поэтому коду ничего не ясно. У вас есть компонент menu-avtr, из которого вы пытаетесь взять computed свойство, которое не используется в этом компоненте и его использовать в другом. Где логика происходящего?)

[Алексей Повольнов]

Evgeny Kulakov, Переменная currentTab

Answer 3

[Алексей Повольнов]

Вот весь код

<component v-bind:is="movePunkts" class="formAvtr"></component>

Vue.component("menu-avtr", {
		data: function() {
			return {
				punktsMenuAvtr: [ {text: 'Вход', tabs: "inp"}, {text: 'Регистрация', tabs: "reg"} ],
				currentTab: "inp"
			}
		},
		template: '<menu><li v-for="punkt in punktsMenuAvtr" @click="currentTab = punkt.tabs" v-bind:data-active=" currentTab === punkt.tabs ? true : false ">{{ punkt.text }}</li></menu>',
		computed: {
			movePunkts: function(){
				return 'form-' + this.currentTab
			}
		}
	});
	Vue.component("form-inp", {
		template: '<form>Вход</form>'
	});
	Vue.component("form-reg", {
		template: '<form>Регистрация</form>'
	});

Comments

[levchak0910]

Вопрос можно редактировать

[Алексей Повольнов]

levchak0910, спасибо