v-model应用在组件上

2023-12-21 09:55:16

目录

v-model应用到表单组件

简写


v-model 原理

原理:v-model本质上是一个语法糖。例如应用在输入框上,就是 value属性 和 input事件 的合写。

作用:提供数据的双向绑定

① 数据变,视图跟着变 :value

② 视图变,数据跟着变 @input

注意:$event 用于在模板中,获取事件的形参

v-model应用到表单组件

1.表单类组件 封装→实现子组件和父组件数据的双向绑定

① 父传子:数据 应该是父组件 props 传递 过来的,拆解 v-model 绑定数据

② 子传父:监听输入,子传父传值给父组件修改

App.vue

<template>
  <div>
    <h1>大标题</h1>
    <header-comp :projectId="selectId" @changeId="selectId=$event"></header-comp>

  </div>
</template>

<script>
import HeaderComp from './components/HeaderComp.vue'

export default {
  components: {
    HeaderComp
  },
  data () {
    return {
      selectId: '2'

    }
  }

}
</script>

<style>

</style>

HeaderComp.vue

<template>
  <div class="fa">
    <h2>h2文章二级标题</h2>
<select name="" id="" :value="projectId"  @change="handleChange">
  <option value="1">html</option>
  <option value="2">css</option>
  <option value="3">js</option>
</select>
  </div>
</template>

<script>

export default {
  props: {
    projectId: String
  },
  methods: {
    handleChange (e) {
      console.log(e.target.value)
      this.$emit('changeId', e.target.value)
    }
  }

}
</script>

<style>

</style>

简写

2、父组件 v-model 简化代码,实现 子组件 和 父组件数据 双向绑定

① 子组件中:props通过value接收,事件触发input

② 父组件中: v-model给组件直接绑数据( :value +@input )

App.vue

<template>
  <div>
    <h1>大标题</h1>
    <!-- <header-comp :projectId="selectId" @changeId="selectId=$event"></header-comp> -->
<header-comp v-model="selectId"></header-comp>
  </div>
</template>

<script>
import HeaderComp from './components/HeaderComp.vue'

export default {
  components: {
    HeaderComp
  },
  data () {
    return {
      selectId: '2'

    }
  }

}
</script>

<style>

</style>

HeaderComp.vue

<template>
  <div class="fa">
    <h2>h2文章二级标题</h2>
<select name="" id="" :value="value"  @change="handleChange">
  <option value="1">html</option>
  <option value="2">css</option>
  <option value="3">js</option>
</select>
  </div>
</template>

<script>

export default {
  props: {
    value: String
  },
  methods: {
    handleChange (e) {
      console.log(e.target.value)
      this.$emit('input', e.target.value)
    }
  }

}
</script>

<style>

</style>

文章来源:https://blog.csdn.net/m0_56713342/article/details/135111220
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。