论 v-model(父)--props--v-model(子) ###vue2.x

最新推荐文章于 2024-07-12 16:27:40 发布

qq_37659178

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量127

点赞数

分类专栏：前端js框架文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_37659178/article/details/104747142

版权

前端js框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emit_event_vmodel2</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>总数: {{ total }}</p>
    <my-component v-model="total"></my-component> <!-- step 3 与父--><!--   <input type="text" :value="value" @input="updateValue" v-model="total">   -->
    <button @click="handleReduce">-1</button><!--step 1-->
</div>
<script>
    Vue.component('my-component', {
        props: ['value'],/* step4 */ //相当于一个switcher (exchanger)
        template: '<input type="text" :value="value" @input="updateValue">',/*step 5 6*/ /*core v-model="total" 与 'value'*/
        //template: '<input type="text" v-model="value">', //具有同样效果!
        methods:
            {
                updateValue: function (event) {
                    this.$emit('input', event.target.value);//event.target.value==input
                }
            }
    });
    var app = new Vue({
        el: '#app',
        data: {
            total: 0
        },
        methods: {
            handleReduce: function () {/*step 2*/
                this.total--;
            }
        }
    });
</script>


</body>
</html>

qq_37659178

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
论 v-model(父)--props--v-model(子) ###vue2.x

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>emit_event_vmodel2</title> <script src="https://unpkg.com/vue/dist/vue.js">&...
复制链接

扫一扫