时间戳

首页 > 解决方案 > 将 markdown 值传递到 Vue.js 中的另一个页面

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

问题描述

我在视图 A 中有一个降价编辑器，它在当前视图中显示结果。我正在尝试将结果传递给另一个页面，即视图 B。在视图 A 中，存在一个按钮来将降价结果共享给视图 B。我正在使用 texarea 输入文本，并且我有 vue-markdown 可以转换文本区域输入到降价结果。我的计划是将相同的 vue-markdown 结果传递给 View B。

查看 A

      <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 {

}

标签： typescriptvuejs2

解决方案

选项 1. 通过 window.open 传递数据

您可以将数据传递到使用window.open.

更多信息在这里。

查看 A

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-property-decorator 使用它们。

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

import ComponentB from "./ComponentB.vue;

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

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

  1. 您需要向组件 B 添加一个道具

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

选项 3. 在组件之间持久化数据

你应该看看Vuex，它可以让你在组件之间持久化数据。

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

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

索引.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,
})

查看 A

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;
}

推荐阅读