vue2 组件传参 v-model

1. 默认情况

v-model="visible"  等价于 :value="visible" 加上 @input="visible = $event"

所以 v-model 就是父组件向子组件传了个 value 字段的值,子组件使用 props 定义 value 字段, 就可以在子组件使用 value 读取这个值;子组件使用 $emit('input',值) 就可以改变 v-model 的值。

父组件

<Chlid v-model="visible" />
 
 
<script>
export default {
   data() {
    return {
      visible: true,
    }
   }
}
<script/>

子组件

 
<template>
    <div v-show="value">
        我是子组件文字
        <button @click="$emit('input',false)">关闭</button>
    </div>
</template>
 
<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
}
</script>

2. 子组件改变默认字段名与事件

父组件

<Chlid v-model="visible" />
 
 
<script>
export default {
   data() {
    return {
      visible: true,
    }
   }
}
<script/>

子组件

<template>
    <div v-show="show">
        我是子组件文字
        <button @click="$emit('change',false)">关闭</button>
    </div>
</template>
 
<script>
export default {
    model: {
       prop: "show",
       event: "change",
    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
}
</script>

子组件定义了以下代码就回改变默认字段

    model: {
       prop: "show",
       event: "change",
    }

此时,v-model="visible"  等价于 :show="visible" 加上 @change="visible = $event"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js中,v-model指令用于在表单控件和Vue.js实例的数据之间双向绑定。在调用函数时传递参数,可以通过在v-model指令中使用计算属性来实现。 例如,我们可以创建一个名为“message”的data属性,并将其与一个文本输入框双向绑定: ``` <template> <div> <input v-model="message"> <button @click="sendMessage">Send</button> </div> </template> <script> export default { data() { return { message: '' } }, methods: { sendMessage() { console.log(this.message); } } } </script> ``` 在上面的示例中,我们创建了一个名为“sendMessage”的方法,并在按钮的@click事件中调用该方法。当用户在文本框中输入文本时,该方法将控制台输出该文本。 如果要将其他参数传递给sendMessage方法,我们可以创建一个计算属性,该属性将返回一个包含所需参数的对象: ``` <template> <div> <input v-model="message"> <button @click="sendMessage({param1: 'value1', param2: 'value2'})">Send</button> </div> </template> <script> export default { data() { return { message: '' } }, methods: { sendMessage(params) { console.log(this.message, params.param1, params.param2); } }, computed: { messageParams() { return { param1: 'value1', param2: 'value2' } } } } </script> ``` 在上面的示例中,我们创建了一个名为“messageParams”的计算属性,并在sendMessage方法的调用中使用该属性来传递参数。当用户在文本框中输入文本时,该方法将控制台输出该文本以及参数值"value1"和"value2"。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值