码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-07-11 21:25:23      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:set   strong   github   utf-8   model   current   tps   type   input   

参考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 与 组件化的表单组件如何沟通

标签:set   strong   github   utf-8   model   current   tps   type   input   

原文地址:https://www.cnblogs.com/CyLee/p/9296626.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!