后端开发教程 - Java、Spring Boot 实战 - msg200.com
Vue.js 中的组件之间共享数据
在本教程中，我们将探索在一个组件中生成数据，并将其传递给Vue.js中的另一个组件。
TL;DR
这是一个工作 CodeSandbox 的示例
https://codesandbox.io/s/l4yj6jxpqz
我们为什么需要这样做？
如果您曾经开发过大型 Vue 应用程序，那么您可能曾经想过在一个组件中生成数据，然后在另一个组件中处理这些数据。在本教程中，我们将从一个组件传递用户输入的文本，并在另一个组件中将其显示为列表。我们不会使用 Vue.js 之外的任何依赖项。
我们该怎么做呢？
首先，我们需要启动并运行 Vue.js。这里 有介绍，或者你可以设置一个CodeSandbox。
如果你使用 Vue CLI 或 CodeSandbox 设置了你的应用，那么你可能已经拥有了项目的初始结构。如果没有，我们需要一个地方来展示我们未来的组件。
// App.vue file
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: "App"
}
</script>
上面的代码是本教程的一个很好的起点。在提供的CodeSandbox 示例中，此文件名为App.vue。此处显示的代码将作为展示我们将要构建的组件的基础。
接下来，我们将开始构建我们的组件。
在列出的示例中，在名为的文件夹中创建了两个组件components。
我们要看的第一个文件是UsrMsg.vue。
// UsrMsg.vue file
<template>
<div>
<input
placeholder="Enter Text Here"
v-model="tempMessage"
@keyup.enter="submit"
/>
</div>
</template>
<script>
export default {
name: "UsrMsg",
data() {
return {
tempMessage: ""
};
},
methods: {
submit: function() {
this.$emit("inputData", this.tempMessage);
this.tempMessage = "";
}
}
};
</script>
在此文件中，您将看到一个input元素。该元素使用 Vue 的 来input更新数据字段。tempMessagev-model
<input
placeholder="Enter Text Here"
v-model="tempMessage"
@keyup.enter="submit"
/>
点击 时，会调用enter方法。在此方法中，我们使用(emit: “发出光束”)将其提供给父组件。以字符串作为第一个参数，在本例中为。它还可以接受第二个参数，通常是一段数据。在我们的示例中，我们传递 的值。这也可以是一个整数、变量、数组或对象。您还会注意到，我们在 之后进行了设置。这将清除输入字段以接受下一个值。submit$emit tempMessage$emitinputDatatempMessagetempMessage = ""$emit
submit: function() {
this.$emit("inputData", this.tempMessage);
this.tempMessage = "";
}
让我们将UsrMsg组件添加到我们的App.vue文件中。
// App.vue file
<template>
<div id="app">
<UsrMsg @inputData="updateMessage" />
</div>
</template>
<script>
import UsrMsg from "./components/UsrMsg";
export default {
name: "App",
components: {
UsrMsg
},
data: function() {
return {
childData: ""
};
},
methods: {
updateMessage(variable) {
this.childData= variable;
}
}
};
</script>
首先，我们希望组件发出的数据可用。为此，我们为发出的数据添加一个监听器。我们inputData在组件中选择了 作为数据名称，因此这将是我们的监听器。第二部分执行一个名为 的方法updateMessage。
<UsrMsg @inputData="updateMessage" />
每当组件内部的数据发生变化时，该updateMessage方法就会被执行。在此方法中，我们通过 data 字段提供组件数据childData。现在，它可以作为 prop 传递给另一个组件了。
updateMessage(variable) {
this.childData= variable;
}
现在，让我们构建将向其传递数据的组件。
我们首先创建一个名为Results.vue的文件。
// Results.vue file
<template>
<div>
<li v-for="(message, index) in messageList" :item="message" :key="index">
{{ message }}
</li>
</div>
</template>
<script>
export default {
name: "Results",
props: {
msg: {
type: String
}
},
data: function() {
return {
messageList: []
};
},
watch: {
msg: function() {
this.messageList.push(this.msg);
}
}
};
</script>
在这个例子中，我们基于一个名为 的数组创建了一个列表messageList。将数据推送到数组中并非必需，但出于演示目的，这样做会更有趣一些。😜
<li v-for="(message, index) in messageList" :item="message" :key="index">
{{ message }}
</li>
该messageList阵列正在关闭数据支柱msg。
props: {
msg: {
type: String
}
}
当数据通过 data 属性传递到此组件时msg，它会被推送到messageList数组中。我们使用该watch属性将 prop 中的新数据添加到数组中msg。
watch: {
msg: function() {
this.messageList.push(this.msg);
}
}
<li>当新项目添加到数组时，我们的元素将会更新messageList。
现在，我们可以将结果组件添加到我们的App.vue文件中。
<template>
<div id="app">
<UsrMsg @inputData="updateMessage" /> <Results :msg="childData" />
</div>
</template>
<script>
import UsrMsg from "./components/UsrMsg";
import Results from "./components/Results";
export default {
name: "App",
components: {
UsrMsg,
Results
},
data: function() {
return {
childData: ""
};
},
methods: {
updateMessage(variable) {
this.childData = variable;
}
}
};
</script>
我们添加我们的组件并通过 propResults传递。childDatamsg
<Results :msg="childData" />
我们现在可以在UsrMsg组件中生成数据并将其传递给Results组件。