Vue组件间传值 v-model

使用过Vue的同学应该都了解组件之间传值

父组件 --> 子组件： props

子组件 --> 父组件：事件

其实有一种更为简单的方法，是基于上述两种方法，那就是 v-model

我们都在表单中使用过 v-model 来绑定数据，其实组件之间也是可以用 v-model 进行双向绑定的

我们来了解一下 v-model 的原因

<input type="text" v-model="message" />

<!--其实上面这种写法只是一个语法糖，本质如下-->

<input type="text" v-bind:value="message" v-on:input="message = $event.target.value" />

由此看出 v-model 的本质就是绑定一个属性和事件

因此在组件中可以这样使用

<!--html-->

<my-component v-model="message"></my-component>

<!--JS-->

Vue.component('my-component',{

    template: `<select @change="changeSelect()" ref="selector">

                    <option value="0">javascript</option>

                    <option value="1">PHP</option>

                    <option value="2">C#</option>

                </select>`,

    props:['value'],

    methods: {

        changeSelect(){

            this.$emit('input',this.$refs.selector.value)

        }

    }

})

var app = new Vue({

    el : '#app',

    data(){

        return {

            message : 1

        }

    }

})

巴特西

Vue组件间传值 v-model

最新文章

热门文章