问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue文档里说v-model用在select字段时会将value作为prop是什么意思?

头像
蓝明延
    8125

    在阅读Vue官方文档的时候，有一段内容非常不理解：

    text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

    来源：Vue官方文档->表单输入绑定->基础用法

    前面两行都很好理解，因为input是有value属性的，但是select并没有value属性。
    文档说select是拿了个value做prop，但是prop不是组件的自定义特性吗？难道vue这里是把select当成了一个组件？
    查了很多资料都没看到关于这段话的解释，所以在此进行提问了。

    注意这里并没有涉及到第三方框架，是原生标签的用法

    vue.jsjavascript
    阅读 5.5k
    4 个回答
    得票最新
    头像
    夕水
      5.4k22153

      如果你看了这里自定义v-model，你就会明白了。比如，现在我给你封装一个基本的下拉框组件,你要知道v-model是怎么实现的。如下:

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>

<body>
    <div id="demo">
        <base-select v-model="selectValue"></base-select>
        <span>选中:{{ selectValue }}</span>
    </div>
    <script>
        Vue.component('base-select', {
            template: `
            <select :selected="selected" @change="$emit('change',$event.target.value)">
                <option value="1">爱好1</option>
                <option value="2">爱好2</option>
                <option value="3">爱好3</option>
                <option value="4">爱好4</option>
            </select>
            `,
            model: {
                prop: "selected",
                event: "change"
            },
            props: {
                selected: String
            }
        })
        new Vue({
            el: "#demo",

            data() {
                return {
                    selectValue: ""
                }
            },
            methods: {

            }
        })
    </script>
</body>

      你知道v-model的实现，那么就不难理解文档的叙述了。

      头像
      fengxh
        5982617

        value是el-select组件的属性，该值是通过v-model传过去的。
        <el-select v-model=""></select>
        在select组件里
        export default {

        props: {
    value: {}
}

        }
        此处的value即是v-model传过去的值

        头像
        坤哥爱工作
          22
          新手上路，请多包涵

          其实就是type类型不同，导致的。
          v-model其实是v-bind和v-on的语法糖。
          也就是说type值为text的时候，<input type="text" v-model="val">等于<input type="text" v-bind="value" v-on="input">
          其他的两种也是这个意思
          使用这一特性，可以实现自定义组件的相互绑定，如果你能明白这个官网这个例子就弄懂了

          头像
          paul_123
            503

            select是组合类型。里面还有option,和组件传值prop是一样的

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题