Day04-Vue基础-监听器-双向绑定-组件通信

Day04-Vue基础-监听器-双向绑定-组件通信

一 侦听器

语法一

<template>
  <div>
    {{name}}
    <br>
    <button @click="update1">修改1</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      name:"赵日天"
    }
  },
  methods:{
    update1(){
      this.name = "刘斩仙"
    }
  },
  // 监听器 watch:用来监听data中数据的变化
  watch:{
    //第一个参数代表新数据,第二个参数代表旧数据
    name(newVal,oldVal){
      console.log(newVal,oldVal);
    }
  }
}
</script>

<style>

</style>

页面上name数据变化，watch里面的代码就开始运行

newVal：新数据

oldVal：旧数据

特点：

1. 监控的数据一定要发生变化，才会执行侦听器代码
2. 侦听器是没有返回结果，你需要将结果自己保存起来。

语法二

<template>
  <div>
    {{name}}
    <br>
    <button @click="update1">修改1</button>
    <br>
    {{arr}}
    <br>
    <button @click="update2">修改2</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      name:"赵日天",
      arr:[
        {id:1,name:"赵日天"},
        {id:2,name:"李杀神"},
        {id:3,name:"王诛魔"},
        {id:4,name:"刘斩仙"},
      ]
    }
  },
  methods:{
    update1(){
      this.name = "刘斩仙"
    },
    update2(){
      this.arr[0].name = "赵昊"
    }
  },
  // 监听器 watch:用来监听data中数据的变化
  watch:{
    //第一个参数代表新值,第二个参数代表旧值
    name(newVal,oldVal){
      setTimeout(function(){
        console.log("------------");
      },1000)
      console.log(newVal,oldVal);
    },
    //开启深度监听
    arr:{
      handler(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
      },
      immediate:true, //开启立即监听
      deep:true //开启深度监听
    }
  }
}
</script>

<style>

</style>

立即侦听 immediate:true

​ 进入程序后，立即执行一次侦听器。

深度侦听 deep:true

​ 默认对象的属性发生变化，侦听器不会执行

​ 当开启深度监听后，当对象的属性发送变化时也能监听到

总结计算属性和watch之间区别：

1. 计算属性依赖于data中的数据return一个新结果，data中的数据发生变化，计算属性立即执行返回最新结果
2. watch指定侦听某个属性，一旦这个属性发生变化，侦听就会执行
3. 计算属性有缓存，侦听器没有缓存
4. 计算属性不支持异步操作
5. watch是可以执行很复杂的异步操作。

二 表单双向绑定-v-model

1 输入框

      商品名称 <input v-model="name"  type="text" > <br>
      开始时间 <input v-model="beginTime"  type="date" > <br>
      结束时间 <input v-model="endTime"  type="date"> <br>
      拼团人数 <input v-model="peopleNumber"  type="text"> <br>

<script>
export default {
  data(){
    return{
      name:"小米电热水壶",
      beginTime: "2022-01-01",
      endTime: "2022-02-01",
      peopleNumber: 0,
    }
  }
}
</script>

2 单选按钮

      性别 <input v-model="sex"   value="男" type="radio" />男
            <input v-model="sex"   value="女" type="radio" />女<br>

  data(){
    return{
      sex:"男"
    }
  }

可以去掉单选按钮身上的name属性，v-model自动进行分组

v-model还可以实现单选按钮默认被选中

3 多个复选框

      爱好 
        <input v-model="hobby"  value="篮球" type="checkbox"  />篮球
        <input v-model="hobby"  value="足球" type="checkbox"  />足球
        <input v-model="hobby"  value="排球" type="checkbox"  />排球

  data(){
    return{
      hobby:["篮球"]
    }
  }

多选框的初始数据必须是数组

如果初始化数组里面有数据能够和value进行匹配，默认会被选中

当切换复选框的值，默认往数组中新增或删除数据。

选中的状态无需设置checked

4 绑定单个复选框

      是否同意
        <input v-model="agree" type="checkbox"  /><br>

  data(){
    return{
      agree: true,
    }
  }

绑定单个复选框和多个复选框实现思路不一样,单个复选框使用布尔值保存数据。

单个复选框，如果加上v-model相当于在进行checked绑定。如果aggree等于true默认被选中

5 下拉列表

    证件类型
      <select v-model="cardType">
          <option value="--请选择--">--请选择--</option>
          <option value="身份证">身份证</option>
          <option value="驾驶证">驾驶证</option>
          <option value="护照">护照</option>
      </select>

  data(){
    return{
      cardType: "--请选择--"
    }
  }

6 修饰符

number:将获取到文本框的值转化数字，默认情况从文本框拿到值都是字符串

v-model.number = ""

trim：去掉得到结果前后的空格

v-model.trim = ""

7 完整案例

<template>
  <div>
    <!-- 
      表单双向绑定 v-model
      表单元素跟data中的数据实现双向绑定,他们数据的变量同步进行
     -->
      商品名称 <input v-model.trim="goods.name"  type="text" > <br>
      开始时间 <input v-model="goods.beginTime"  type="date" > <br>
      结束时间 <input v-model="goods.endTime"  type="date"> <br>
      拼团人数 <input v-model.number="goods.peopleNumber"  type="text"> <br>
      性别 <input v-model="goods.sex"   value="男" type="radio" />男
            <input v-model="goods.sex"   value="女" type="radio" />女<br>
      爱好 
        <input v-model="goods.hobby"  value="篮球" type="checkbox"  />篮球
        <input v-model="goods.hobby"  value="足球" type="checkbox"  />足球
        <input v-model="goods.hobby"  value="排球" type="checkbox"  />排球
      <br>
      是否同意
        <input v-model="goods.agree" type="checkbox"  /><br>
      <br>
      证件类型
      <select v-model="goods.cardType">
          <option value="--请选择--">--请选择--</option>
          <option value="身份证">身份证</option>
          <option value="驾驶证">驾驶证</option>
          <option value="护照">护照</option>
      </select>
      <br>

      {{goods}}
  </div>
</template>

<script>
export default {
  data(){
    return{
      goods:{
        name:"小米电热水壶",
        beginTime: "2022-01-01",
        endTime: "2022-02-01",
        peopleNumber: 0,
        sex:"女",
        hobby:[],
        agree:false,
        cardType: "--请选择--"
      }
    }
  }
}
</script>

<style>

</style>

三 组件通信

在Vue中组件通信是最常见的设计，主要包含以下几种关系：

1. 父传子：父组件传递参数给子组件，子组件使用
2. 子传父：子组件将参数传递父组件，父组件拿着结果进行使用
3. 兄弟传输：可以两个兄弟组件直接直接通信，（不作为重点）

案例

props+自定义事件

父传子-商品数据渲染

父组件传值

    <Table :productList="products"></Table>

MyTable子组件接收数据：

export default {
    props:["productList"],
}

props的规范

语法一：

props:["msg"]

语法二：

props:{
    msg:{
        type:String,
        default:"默认值",
        require:true
    }
}

子传父-搜索/删除功能

采用自定义事件的方式实现

父组件

  methods:{
    //1.定义一个函数,函数的参数用来接收子组件传递的数据
    searchByName(searchName){
      console.log("父--",searchName);
    }
  },

    <!-- 2.定义自定义事件findData,给事件绑定函数searchByName -->
    <Search @findData="searchByName"></Search>

子组件

<button @click="search">搜素</button>

    methods:{
        search(){
            //触发父组件中的自定义事件,调用父组件中的函数,并传参
            //参数一 父组件的自定义事件,参数二 要传递到付组件的参数值
            this.$emit("findData","键盘")
        }
    }

完整案例