如何從Vue組件獲取輸入數據

Question

我搜索了許多 Internet 站點，但沒有找到用於解決問題的有用片段。
我想通過一種數據獲取方法實現從 Vue 組件中的輸入字段值到 Vue 根元素的簡單數據傳遞，
例如，當我按下提交按鈕時，瀏覽器會用msg消息而不是undefined來提醒我。
使用Vue技術，我完全不明白如何做到這一點。 我花了將近一天的時間試圖理解這一點。 實際上，即使在閱讀了第 n 次基礎知識之后，我也不明白 Vue 是如何處理這些根和組件的。 有什么簡單的解釋嗎？

請幫忙！

    <div id="form">
    <button v-on:click="submitBtn">Save</button>
    <custom-form>
    </custom-form>
</div>
<script>

    var testApp = Vue.createApp ({
        methods: {
            submitBtn: function(){
                alert(submit.test)
            }
        }
    })
    
    testComponent.component('custom-form', {
        template: `
            <label>test<input type="text" v-model=value :value=this.test></label>
        ` ,
        data: function() {
            return {
                test: 'msg'
            }
        },
        methods: {
            test: function() {
                return this.test
            }
        }
    })
    
    const vm = testApp.mount('#form')

</script>

Answer 1

只是當我按下提交按鈕時，瀏覽器會用msg消息而不是undefined來提醒我。

這是我剛剛測試過的一個示例，我認為它會對您有所幫助：

在 app.js 文件中：

Vue.createApp({
  data() {
      return {
        test: ''
      };
  },
  methods: {
      testMessage() {
          return alert(this.test);
      }
  }
}).mount('#form');

在 index.html 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js</title>
</head>
<body>
        <div id="form">
            <label for="testInput">Test Message</label>
            <input type="text" id="testInput" v-model="test" />
            <button v-on:click="testMessage">Submit</button>
        </div> 
        
    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
</body>
</html>

如何從Vue組件獲取輸入數據

問題描述

1 個解決方案

解決方案1
1 2021-10-23 14:51:02

如何從Vue組件獲取輸入數據

問題描述

1 個解決方案

解決方案1 1 2021-10-23 14:51:02

解決方案1
1 2021-10-23 14:51:02