Question

我试图从app获取一个简单的值到一个内联模板的组件。我希望这很简单，但在文档中找不到任何可以暗示我出错的地方。

为什么我不能通过prop值在组件中看到parentMessage？

Vue.component('component1', {
  props: ['parentMessage'],
  data() {
    return {
    	message: 'test',
    	items: [
	        {title: 'Milk', value: 5},
	        {title: 'Bread', value: 3},
	        {title: 'Sugar', value: 8}
	    ]
    }
  },
  methods: {
    update() {
      // this.message = 'Updated Component 1'
    }
  }
});

const app = new Vue({
	data() {
		return {
			parentMessage: 'App Message'
		}
	}
}).$mount('#app');

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    <component1 inline-template>
      <div> 
        <h1 :message="parentMessage">{{ message }}</h1>
        <li v-for="(item, index) in items">
          {{ item.title }}: {{ item.value }}
        </li>
      </div>
    </component1>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

</body>
</html>

Answer 1

即使使用inline-template，您仍需要通过组件标记上的:parent-message="parentMessage"将道具传递给组件。

此外，在子组件中，您只将parentMessage绑定到message元素的h1属性。我不确定你期望做什么，但它不会以任何方式将文本呈现给页面。

以下是使用代码的示例，将parentMessage从父级传递到子级道具并在<h1>元素中呈现文本：

Vue.component('component1', {
  props: ['parentMessage'],
  data() {
    return {
      message: 'test',
      items: [
        { title: 'Milk', value: 5 },
        { title: 'Bread', value: 3 },
        { title: 'Sugar', value: 8 }
      ]
    }
  }
});

new Vue({
  data() {
    return { parentMessage: 'App Message' }
  }
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<div id="app">
  <component1 inline-template :parent-message="parentMessage">
    <div> 
      <h1 v-if="parentMessage">{{ parentMessage }}</h1>
      <h1 v-else>{{ message }}</h1>
      <li v-for="(item, index) in items">
        {{ item.title }}: {{ item.value }}
      </li>
    </div>
  </component1>
</div>

从您的评论中，您似乎只是试图在子组件中显示单个消息，并希望能够覆盖父级范围中的默认值。

为此，请将您的message数据属性设为默认值'test'的支柱（或您最终想要的默认值）。然后，您可以从父作用域传递message道具的值将覆盖默认值。

以下是一个例子：

Vue.component('component1', {
  props: {
    message: { 
      type: String,
      default: 'test',
    }
  },
  data() {
    return {
      items: [
        { title: 'Milk', value: 5 },
        { title: 'Bread', value: 3 },
        { title: 'Sugar', value: 8 }
      ]
    }
  }
});

new Vue({
  data() {
    return { parentMessage: 'App Message' }
  }
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<div id="app">
  <component1 inline-template :message="parentMessage">
    <div> 
      <h1>{{ message }}</h1>
      <li v-for="(item, index) in items">
        {{ item.title }}: {{ item.value }}
      </li>
    </div>
  </component1>
</div>

将值从app传递到VueJS2内联模板组件中的组件

1 个答案: