zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Filter
    Servlet
    Maven(Mac)
    SpringMVC 完美解决PUT请求参数绑定问题(普通表单和文件表单)
    Android Bitmap
    Android ContentProvider
    浅谈数据库事务隔离
    开启Spring Initializr个性化之旅
    java浮点型精度丢失浅析
    爬取糗事百科段子
  • 原文地址:https://www.cnblogs.com/CyLee/p/9296626.html
Copyright © 2011-2022 走看看