零基础学vue-组件的双向绑定v-model

作者: 望月成三人 | 来源:发表于2020-10-31 17:35 被阅读0次

零基础学vue-组件的双向绑定v-model
Vue双向数据绑定v-model
v-model原理
VUE指令
vue2.0双向绑定的使用及简单实现
Vue.js教程_7
vue 自定义v-model 封装地址选择组件，并实现数据绑定和
Vue 实例一
vue3自定义组件使用v-model实现双向数据绑定
2、数据绑定

<html>
    <head>
        <meta charset="utf-8">
        <title>组件的双向绑定</title>
        <script type="application/x-javascript" src="js/vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <input-com :username="username" @child-input="changeEvent"></input-com>
            <input-com :username="username" @child-input="username=$event"></input-com>
            <input-com1 v-model="username"></input-com1>
            <h3>{{username}}</h3>
        </div>
        <script type="text/javascript">
            Vue.component("input-com", {
                props:["username"],
                //$event.target.value 表示获取当前输入框绑定的value的值
                template:`
                    <input type="text" @input="$emit('child-input',$event.target.value)" :value="username" />
                `
            })
            
            Vue.component("input-com1", {
                props:["username"],
                template:`
                    <input type="text" @input="$emit('input',$event.target.value)" :value="username" />
                `
            })
            
            var app = new Vue({
                el: "#app",
                data: {
                    username: ""
                },
                methods:{
                    changeEvent:function(data){
                        this.username = data
                    }
                }
            })
        </script>
    </body>
</html>