Question

我正在创建一个将终端模拟为浏览器起始页的网站，并且我使用vue.js作为模板。例如。 locate命令应使用duckduckgo打开搜索查询。

现在我有一个终端组件，看起来像这样：

 export default {
  name: "terminal",
  components: {
    prompt,
    termOut
  },
  data: function() {
    return {
      command: "",
      wd: "~"
    };
  },
  methods: {
    onCommand: function(command) {
      console.log(`got command: ${command}`);
    },
    onCommandSubmit: function(com) {
      console.log(`got command: ${com} (submitted)`);
      let c = com.split(' ')[0];
      this[c]();
    }
  },
  locate: function (args) {
          if (args[0]) {
        window.open("https://duckduckgo.com/" + args.join(' '));
    } else {
        return("Please enter a valid search query");
    }
  }
};

基本思想是，如果从终端组件中识别出命令，则该命令（由用户通过子组件prompt适当地提交）被执行。我尝试通过访问onCommandSubmit方法中所示的function属性来做到这一点。

问题在于，vue组件无法将this[locate]识别为自身的函数。

我知道让用户自己发出命令通常是一个坏主意，但是我并不介意，因为它只是一个个人项目。

如果有更好的方式来处理用户提交的命令，我也会公开提示。

Answer 1

您需要的组件会发出带有参数的事件，然后在父组件中获取该值进行处理。

component.vue

<template>
  <v-btn @click="onSendToParent()" />
</template>

<script>
  export default {
    data() {
      return {
        values: {
          name: 'my name',
          blabla: 'blablabla'
        }
      }
    },
    methods: {
      onSendToParent() {
        console.log(`✅ Emited sendToParent:`, this.values) // eslint-disable-line no-console
        this.$emit('sendToParent', this.values)
      }
    }
  }
</script>

parent.vue

<template>
<div>
  {{ childData }}
  <!-- @sendToParent is the name of your emiter, you can use change, update, and any thing you want. -->
  <my-component @sendToParent="useChildData" />
</div>
</template>

<script>
import MyComponent from 'component'
  export default {
    components: {
      MyComponent
    },
    data() {
      return {
        childData: false
      }
    },
    methods: {
      useChildData(event) {
        console.log(`✅ get data Emited from childComponent:`, event) // eslint-disable-line no-console
        this.childData = event
      }
    }
  }
</script>

从用户提交的字符串中调用组件方法在vue js中

1 个答案: