vue v-model 与组件化的表单组件如何沟通

Posted 2020-12-03 cylee

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue v-model 与组件化的表单组件如何沟通相关的知识，希望对你有一定的参考价值。

参考mint-ui的代码：

https://github.com/ElemeFE/mint-ui/blob/master/packages/radio/src/radio.vue

https://github.com/ElemeFE/mint-ui/blob/master/packages/field/src/field.vue

直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <style>
    </style>

    <body>
        <div id="app">
            <div v-for=‘(item, index) in items‘ :key=‘index‘>
                <myradio v-model="picked" :text="item"></myradio>
            </div>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>
    </body>
    <script>
        // 局部注册组件
        var myradio = Vue.extend({
              data: function () {
                    return {
                        currentValue: this.value
                    }
              }, 
              props: {
                value: ‘‘,
                text: ‘‘
              },     
              template: `
                <label>
                    <input type="radio" id="two" :value="text" v-model="currentValue">
                    <label for="two">{{ text }}</label>
                </label>
              `,
              watch: {
                    value(val) {
                      this.currentValue = val;
                    },
                    currentValue(val) {
                      this.$emit(‘input‘, val);
                    }
         }
        });

        Vue.component(‘myradio‘, myradio)

        new Vue({
            el: ‘#app‘,
            data: {
                picked: ‘Three‘,
                items: [‘One‘, ‘Two‘, ‘Three‘]
            }
        })
    </script>

</html>

以上是关于vue v-model 与组件化的表单组件如何沟通的主要内容，如果未能解决你的问题，请参考以下文章

vue 自定义组件使用v-model

Vue3的表单和开发模式

Vue学习Vue高级特性

vue框架之自定义组件中使用v-model

Vue组件间传值 v-model

将默认数据传递给 Vue 表单组件

vue v-model 与 组件化的表单组件如何沟通

vue v-model 与组件化的表单组件如何沟通