使用vue的v-model实现类型表单元素组件

最新推荐文章于 2022-03-17 22:03:34 发布

Kuyin328178972

最新推荐文章于 2022-03-17 22:03:34 发布

阅读量534

点赞数

分类专栏： vue 文章标签： vue v-mode

本文链接：https://blog.csdn.net/Kuyin328178972/article/details/86216798

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

`v-model:`一个组件上的 `v-model` 默认会利用名为 `value` 的 prop 和名为 `input` 的事件，但是像单选框、复选框等类型的输入控件可能会将 `value` 特性用于不同的目的。`model` 选项可以用来避免这样的冲突。下面是我基于v-mode实现与表单元素同样功能的组件。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="vue.js" ></script>
   </head>
   <body>
       <div id="app">
           <test v-model="msg"></test>
           {{msg}}
           <button @click="test1">我是父组件</button>

       </div>
       <script type="text/javascript">

           Vue.component("test",{
               model:{
                   prop:"testModel",
                   event:"test-model"
               },
               props:{
                   testModel:{
                       type:String,
                       value:"我是子组件的值"
                   }
               },
               methods:{
                   test:function(){
                       this.h++
                       this.$emit('test-model',"我是子组件的" + this.index++);
                   }
               },
               data:function(){
                   return {
                       index:1
                   }
               },
               template:'<button @click="test">我是子组件</button>'
           });


           var vm = new Vue({
               el:"#app",
               data:function(){
                   return {
                       msg:"我是父组件",
                       index:1
                   }
               },
               methods:{
                   test1:function(){
                       this.msg="父组件更改值" + this.index++
                   }
               }
           });


       </script>
   </body>
</html>

Kuyin328178972

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用vue的v-model实现类型表单元素组件

v-model:一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突。下面是我基于v-mode实现与表单元素同样功能的组件。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;he...
复制链接

扫一扫