zoukankan      html  css  js  c++  java
  • vue学习之-----v-model数据双向绑定,自定义组件父子传参

    1、官网定义:

    v-model指令-----在表单input,textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

    v-model本质上是语法糖,它负责监听用户的输入事件以更新数据。

    <template>
        <div>
            <div>v-model一般使用方式:</div>
            <div>
                <input v-model="message">
                <p>同步更新为: {{ message }}</p>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    message: "初始值"
                }
            }
        }
    </script>
    
    <style>
    </style>

    效果:

    //相当于把输入值value属性绑定为动态值,这个值被input方法控制为输入值本身,这就使得输入值变为公用值,实现联动:
    ......
    <input :value="message" @input="inputMessage" />
    ......
    
    //inputMessage方法为:
    inputMessage(e){
      this.message= e.target.value
    }

    2、在父子传参中的用法:

    官网中的这句话-------“一个组件上的v-model默认会利用名为value的 prop 和名为input的事件”

    可以理解为:父子组件想通过v-model实现数据双向联动,则默认父组件调用子组件时,会把值传递给名为value的prop,而子组件触发input事件时会更新父组件中传递的value值!

    而value和input是可以通过model选项自己定义的。

    (1)子组件中是input输入框的情况:

    》》父组件

    <template>
        <div>
            <div>v-model一般使用方式:</div>
            <div>
                <input v-model="message">
                <input :value="message" @input="inputMessage" />
                <p>同步更新为: {{ message }}</p>
            </div>
            <h5>父子传参中v-model的使用:子组件中是input输入框</h5>
            <vModelCpn v-model="message"></vModelCpn>
        </div>
    </template>
    
    <script>
        import vModelCpn from './components/v-model-cpn.vue'
        export default {
            components:{
                vModelCpn
            },
            data() {
                return {
                    message: "初始值"
                }
            },
            methods:{
                inputMessage(e){
                    this.message= e.target.value
                }
            }
        }
    </script>
    
    <style>
    </style>

    》》子组件

    <template>
        <div>
            <input v-model="valueA" />
        </div>
    </template>
    
    <script>
        export default{
            props:['value'],
            data(){
                return{
                    valueA:""
                }
            },
            watch:{
                value:{
                    handler(val){
                        this.valueA=val
                    },
                    deep:true
                }
            },
            mounted(){
                this.valueA=this.value
            },
            methods:{
                
            }
        }
    </script>
    
    <style>
    </style>

    效果:

     (2)子组件中不是表单元素的情况:

    》》父组件------同上

    》》子组件

    <template>
        <div>
            <!-- <input v-model="valueA" /> -->
            <p>p标签能同步吗????------{{valueA}}</p>
            <button @click="changeValue" type="button">改变value值</button>
        </div>
    </template>
    
    <script>
        export default {
            props: ['value'],
            model: {
                prop: 'checked',
                event: 'change'
            },
            data() {
                return {
                    valueA: ""
                }
            },
            watch: {
                value: {
                    handler(val) {
                        this.valueA = val
                    },
                    deep: true
                }
            },
            mounted() {
                this.valueA = this.value
            },
            methods: {
                changeValue() {
                    this.valueA = "改变后的值-----hello!!!"
                    // this.$emit("input", "改变后的值-----hello!!!")//默认监听input事件
                    this.$emit("change", "改变后的值-----hello!!!","3333")
                }
            }
        }
    </script>
    
    <style>
    </style>

    效果:

    个人通俗易懂理解:

    v-model通过监听input,change等表单事件来同步prop值,如果子组件不是表单元素,就用自定义事件this.$emit造一个表单事件~~

  • 相关阅读:
    md基本语法
    CodeBlocks安装使用、汉化以及更改配色
    hexo+github搭建个人博客教程和各种坑记录
    GB/T 38637.1-2020 物联网 感知控制设备接入 第1部分:总体要求
    山东大学909数据结构与程序设计考研经验分享
    GB/T 39083-2020 快递服务支付信息交换规范
    GB/T 38829-2020 IPTV媒体交付系统技术要求 内容接入
    GB/T 37733.3-2020 传感器网络 个人健康状态远程监测 第3部分:终端技术要求
    GB/T 38801-2020 内容分发网络技术要求 互联应用场景
    GB/T 30269.809-2020 信息技术 传感器网络 第809部分:测试:基于IP的无线传感器网络网络层协议一致性测试
  • 原文地址:https://www.cnblogs.com/zhaoyingzhen/p/15210043.html
Copyright © 2011-2022 走看看