Question

我创建了一个vue组件（输入），该组件可以根据第一个字符改变方向。看起来像这样：

let smart_input = Vue.component('smart-input', {
    template: `<input :dir="direction" v-model="text">`,

    data() {
        return {
            text: ''
        }
    },

    computed: {
        direction(){
            let firstChar = this.text[0]
            return firstChar === undefined || firstChar.match(/[A-Za-z]/) !== null ? 'ltr' : 'rtl'
        }
    }
})

我将此组件添加到了我的Vue根应用程序中。

所以我想向我的自定义组件（例如v-model）添加一些属性，但这不起作用！

看起来像这样：

<smart-input v-model='infomation'></smart-input>

我该如何解决此问题？

Answer 1

我不知道这是否是您需要的，但这是我对组件的v模型的看法

const smart_input = Vue.component('smart-input', {
    template: `
    <div>
    <input :dir="direction"  ref="inputref" :value="value" v-on:input="UpdateParent">  
      <button @click="Changeinfo">Parent Change</button>
    </div>
    `,
    props:{value:null},
    computed: {
        direction(){
            let firstChar = this.value[0];
            return firstChar === undefined || firstChar.match(/[A-Za-z]/) !== null ? 'ltr' : 'rtl'
        }
    },
    methods:{
    UpdateParent:function(event){
        this.$emit('input', event.target.value)
    },
    Changeinfo:function(){
        this.$emit('input', 'changed')
    }
    }

})

new Vue({
  el: '#app',
  components:{smart_input},
  data(){
    return{
        infomation:"test"
    }
  },
  methods:{
        TestVmodel:function(){
        this.infomation = "parent";
    }
  }  
})

这提供了类似于v-model的双向绑定

https://jsfiddle.net/50wL7mdz/407158/

我如何创建可以提供v-model属性的自定义组件

1 个答案: