将markdown值传递到Vue.js中的另一个页面中

Question

我在视图a中有一个markdown编辑器，它在当前视图中显示结果。我正试图将结果传递给另一个页面，即视图B。在视图a中，有一个按钮可以将标记结果共享给视图B。我使用texare键入文本，我有vue标记，它将文本区域输入转换为标记结果。我的计划是将相同的vue降价结果传递到视图B.

查看

<template>
<div class="boxA">
<form id="add-form" >
<div>
<button class="btn-share"@click="shareToPublic()"> 
Share To View B</button>
</div>
<div>
<input type="text" v-model:value="saveNotes.title">
</div>
<textarea v-model:value="saveNotes.text" name="content"></textarea>
</form>
<vue-markdown :source="saveNotes.text" >
</vue-markdown>
</div>
</template>
<script lang="ts">
import VueMarkdown from 'vue-markdown';
import {Component, Vue} from 'vue-property-decorator';
@Component({
components: {
VueMarkdown,
}
})
export default class MarkdownNotePad extends Vue {

noteList: any[] = [];

saveNotesDefault: NoteType = {
title: '',
text: '',
};
shareToPublic(){
const routData = this.$router.resolve({name:'ViewB'});
window.open(routData.href, 'viewB')
}
</script>

查看B

<template>
<div class="container">
<div>
{{ View A markdown result }}
</div>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component
export default class SharePublic extends Vue {
}

Answer 1

选项1。通过窗口传递数据。打开

您可以将数据传递到使用window.open创建的新窗口。

点击此处了解更多信息。

查看

shareToPublic() {
const routData = this.$router.resolve({name:'ViewB'});
var viewB = window.open(routData.href, 'viewB');
viewB.notes = saveNotes.text;
}

查看B

notes: string | null = null;
mounted() {
this.notes = window.notes;
}

选项2。在组件之间传递数据

看看使用Props将数据传递给子组件，以及如何将它们与@Prop的vue属性decorator一起使用。

1. 您需要在ts中引用组件B：

import ComponentB from "./ComponentB.vue；

2. 您需要在标记中引用组件B并传递标记：

<component-b :markdown="saveNotes.text"></component-b>

3. 您需要向组件B添加道具

@Prop(String) markdown: string | null = null;

选项3。组件之间的数据持久化

您应该看看Vuex，它允许您在组件之间持久化数据。

据我理解你的问题。你会想做这样的事情：

用户导航到视图A
用户键入一些文本
单击"共享">
Vuex存储文本
使用户导航到视图B
Vuex读取存储的文本

index.ts

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
notes: null
},
mutations: {
updateNotes(state, notes) {
state.notes = notes;
}
}
});
new Vue({
el: '#app',
store: store,
})

查看

shareToPublic(){
this.$store.commit("updateNotes", this.saveNotes.text);
const routData = this.$router.resolve({name:'ViewB'});
window.open(routData.href, 'viewB')
}

查看B

get notes() {
return this.$store.state.notes;
}