Question

我正在尝试将类名作为变量传递给子组件。

上下文：我在网站上使用了两种类型的标头（2个不同的bakgrounds）。

第1页：

<HeaderMain bg="bg" />

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

Page：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"）

Answer 1

您必须在GET my_index/_search { "_source": { "excludes": [ "content" ] }, "query": { "query_string": { "default_field": "content", "query": "long content" } } }组件上定义bg属性：

HeaderMain

然后，您将可以像在模板中一样使用它：

// HeaderMain.vue

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

Answer 2

要访问它，您需要将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>

将变量传递给子组件

2 个答案: