Передайте переменную дочернему компоненту - PullRequest
Новая
       17

Передайте переменную дочернему компоненту

0 голосов
/ 25 марта 2019

Я пытаюсь передать имя класса как переменную дочернему компоненту.

Контекст: у меня есть два типа заголовков (2 разных bakgrounds), используемых по всему сайту.

Page1: 

<HeaderMain bg="bg" />

data() {
  return {
    pageTitle: 'patterson.travel',
    bg: 'bg-white',
  }
}

Страница: 2 

<HeaderMain bg="bg" />

data() {
  return {
    pageTitle: 'patterson.travel',
    bg: 'bg-header',
  }
}

HeaderMain: 

<header>
    <nav class="main md:bg-transparent" :class="bg"></nav>
</header>

Но класс никогда не будет применен к <nav>

Я попытался добавить переменную в компонент HeaderMain следующим образом (по умолчанию): 

data() {
  return {
    bg: 'bg-red', // default?
  }
}

Но это класс, который у него всегда есть ...

Итак, есть идеи, что мне здесь не хватает?

(я тоже пробовал :bg="bg")

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

Чтобы получить к нему доступ, вам нужно определить props как массив внутри дочернего компонента.

Посмотрите на код ниже. 

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

const LastName = {
	template: '<span> Patel </span>'
}
const Header = {
	props: ['bg'],
	template: '<span :class="bg"> {{bg}} Header </span>'
}

new Vue({
  el: "#app",
  data: function() {
    return {
      headerBg: 'header-bg'
    }
  },
  components: {
  	'last-name': LastName,
    'header-view': Header
  }
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.header-bg {
  background: red;
}

.header-bg {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <header-view :bg="headerBg"></header-view>
  <user-name name="Varit"></user-name>
  <last-name></last-name>
</div>
0 голосов
/ 25 марта 2019

Вы должны определить свойство bg для компонента HeaderMain: 

// HeaderMain.vue

<script>
    export default {
      props: ['bg']
    }
</script>

После этого вы сможете использовать его в своем шаблоне так же, как и вы: 

<header>
    <nav class="main md:bg-transparent" :class="bg"></nav>
</header>
...