Question

我想要构建的是一个可以从输入中检测错误的表单。输入在表单的一个部分中呈现（在我当前的设置中）。但经过几个小时的工作，它不起作用。

使这个概念有效的最佳方法是什么？我应该使用插槽还是其他方式？

这是我的代码：

//Form.vue
<template>
<form method="POST" action="/projects">

<slot></slot>

<div class="control">
    <button class="button is-primary">Create</button>
</div>

</template>

<script>
import {FormHelper} from './classes/FormHelper.js';

export default {

    /*
     * The component's properties.
     */
    props: {
        fields: Object
    },

    data() {
        return {
            form: new FormHelper(this.fields) //this must be kwown in the Input.
        };
    },

}
</script>

//Input.vue
<template>
<div class="control">
    <label for="name" class="label">{{label}}</label>

    <input type="text" id="name" name="name" class="input">

    <!--<span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>-->
</div>

</template>

<script>

export default{
    /*
     * The component's properties.
     */
    props: {
        placeholder: String,
        label: String,
        name: String,
        originalValue: String,
    },

}
</script>

在浏览器中实施：

<vue-form :fields="{'name': 'piet', 'description': 'arie'}">
    <vue-input
        label="The Name"
        name="name"
    ></vue-input>

    <vue-input
        label="The Description"
        name="description"
    ></vue-input>
</vue-form>

Answer 1

您可以使用自定义事件。在cild组件中

data segment                                   
entr_first db 'Please enter first num 1-4 digits:',0ah,0dh,'$'
select_op db 'Please enter operation type + or -:',0ah,0dh,'$'
entr_sec db 'Please enter second num 1-4 digits:',0ah,0dh,'$'
ans db 'Your answer is: $'
num1 db 7 dup('5')
num2 db 7 dup('5')
answer db 8 dup('6')
opr db 1 dup('0')
data ends
sseg segment stack
sseg ends
code segment
assume cs:code,ds:data,ss:sseg
main:   mov ax,data
        mov ds,ax
        call kelet1
        call revah
        call keletOpr
        call revah
        call kelet2
        call dollar
        int 21h
        mov ax,4c00h
        int 21h
dollar:
        mov cx,0
        mov si,0
        mov cl,num1[si+1]
        add si,cx
        add si,2
        mov num1[si],'$'
        mov cx,0
        mov si,0
        mov cl,num1[si+1]
        add si,cx
        add si,2
        mov num2[si],'$'
        ret
revah:  mov ah,2
        mov dl,13
        int 21h
        mov dl,10
        int 21h
        ret
kelet1: mov dx,offset entr_first
        mov ah,9
        int 21h
        mov dx,offset num1
        mov ah,10
        int 21h
        ret
keletOpr:mov dx,offset select_op
         mov ah,9
         int 21h
         mov ah,1
         int 21h
         mov opr[0],al
         ret
kelet2: mov dx,offset entr_sec
        mov ah,9
        int 21h
        mov dx,offset num2
        mov ah,10
        int 21h
        ret
        code ends
        end main

在父母中你可以用

来处理它

this.$emit('EventName', someData)

Answer 2

来自documentation：

在Vue.js中，父子组件关系可以概括为道具向下，事件向上。父母通过道具将数据传递给孩子，孩子通过事件向父母发送消息。让我们看看他们接下来的工作方式。

How to pass props

以下是将道具传递给子组件的代码:(使用v-model value is passed as props或v-bind myMessage中的parentMsg作为道具传递

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

How to emit event

以下是您更新父母的方式：每当您在孩子中增加时：您通过调用由父母处理的this.$emit('increment')亲密父母。

HTML：

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

JS：

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

vuejs v2将数据传递给组件并在更改时更新父组件

2 个答案:

How to pass props

How to emit event