v-model应用在组件上

目录

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>