v-model组件

最新推荐文章于 2024-08-16 15:49:18 发布

bug菌

最新推荐文章于 2024-08-16 15:49:18 发布

阅读量292

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_39105508/article/details/83013641

版权

今天发现有一个v-model的组件，我查了查资料发现原理是我昨天写的的子组件向父组件传值。

先上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue v-model组件</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <script type="text/javascript" src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="box">
            <!-- <price-input v-model="price"></price-input> -->
            <!-- 手动实现了v-model双向绑定 -->
            <!-- 3、父组件的input事件被触发，将传来的值赋给父组件的变量price -->
            <!-- 4、父组件value的值绑定到price -->
            <h3 style="color: red;">v-model组件</h3>
            <price-input :value="price" @input="onInput"></price-input>
            <p>{{price}}</p>
            <br>
            <br>
            <br>
            <br>
            <h3 style="color: red;">v-model语法糖用法</h3>
            <input v-model="price2" type="text">
            <p>{{price2}}</p>
        </div>
        <script type="text/javascript">
            Vue.component('price-input', {
                // 5、将父组件的value值通过props传递给子组件
                // 1、当有数据输入时触发了该组件的input事件
                template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
                props: ["value"], 
                methods: {
                     updateVal: function(val) {
                        // 2、手动触发父组件的input事件并将值传给父组件
                        this.$emit('input', val);
                     }
                 }
            });
            var app = new Vue({
                 el: '#box',
                 data: {
                     price: '',
                     price2: ''
                 },
                 methods: {
                      onInput: function(val) {
                           this.price = val;
                      }
                  }
             });
        </script>
	</body>
</html>

这个内容核心就是子组件向父组件传值，通过输入内容触发事件，然后把事件传给父组件 emmm...... ，好麻烦不解释了。总之这就是v-model语法糖的实现方式。和直接用v-model作用一样。