Vue入门2

v-model

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

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

1. 数据变，视图跟着变 :value
2. 视图变，数据跟着变 @input

注意：$event用于在模板中，获取事件的参数

<template>
  <div class="app">
    <input v-model="msg" type="text"><br>
    <input :value="msg1" @input="msg1 = $event.target.value" type="text">
  </div>
</template>

表单类组件封装$v-model简化代码

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

1. 父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据
2. 子传夫：监听输入，子传夫值给父组件修改

父元素：

<template>
  <div id="app">
<HelloWorld :citiyId="selectId" @changeId="selectId = $event"></HelloWorld>
  </div>
</template>

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

export default {
 data(){
  return{
    selectId: '101'
  }
 },
 components:{
  HelloWorld
 }
}
</script>

<style>

</style>

子元素：

<template>
  <div class="app">
    <select :value="citiyId" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">深圳</option>
      <option value="105">广州</option>
    </select>
  </div>
</template>

<script>
export default {
  props:{
    citiyId: String
  },
  methods:{
    handleChange(e){
      this.$emit('changeId',e.target.value)

    }
  }
}
</script>

<style>

</style>

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

1. 子组件中：props通过value接收，事件触发input
2. 父组件中：v-model给组件直接绑数据

父组件：

<template>
  <div id="app">
<HelloWorld v-model="selectId">
</HelloWorld>
  </div>
</template>

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

export default {
 data(){
  return{
    selectId: '105'
  }
 },
 components:{
  HelloWorld
 }
}
</script>

<style>

</style>

子组件：

<template>
  <div class="app">
    <select :value="value" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">深圳</option>
      <option value="105">广州</option>
    </select>
  </div>
</template>

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

    }
  }
}
</script>

<style>

</style>

表单类基础组件封装思路

1. 父传子：父组件动态传递prop数据，拆解v-model，绑定数据
2. 子传父：监听输入，子传父值给父组件修改

本质：实现了实现子组件和父组件的双向绑定

v-model简化代码的核心步骤

1. 子组件中：props通过value接收，事件触发input
2. 父组件中：v-model给组件直接绑数据

.sync修饰符

作用：可以实现子组件与父组件数据的双向绑定，简化代码

特点：prop属性名，可以自定义，非固定为value

ref和$refs

作用：利用ref和$refs可以用于获取dom元素或组件实例

特点：查找范围：当前组件内（更精确稳定）

获取组件：

1.ref：

1. 在vue模板中，可以使用ref特性来标识子组件或DOM元素
2. 通过ref可以访问子组件实例或DOM元素
3. 一般在组件内部使用ref来获取子组件实例或DOM元素，并只能在组件内部使用

<template>
  <child-component ref="myComponent"></child-component>
</template>

<script>
export default {
  mounted() {
    this.$refs.myComponent.doSomething();
  }
}
</script>

2.$refs

1. $refs是vue实例上的一个对象，用来存储所有拥有ref特性的子组件或DOM元素引用。

通过$refs可以直接访问子组件实例或DOM元素

<template>
  <child-component ref="myComponent"></child-component>
</template>

<script>
export default {
  mounted() {
    this.$refs.myComponent.doSomething();
  }
}
</script>

调用组件内的方法：

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod(); // 调用子组件的方法
    }
  }
}
</script>

vue异步更新，$nextTick

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  methods: {
    updateMessage() {
      this.message = '更新后的消息';
      this.$nextTick(() => {
        // 在 DOM 更新完成后执行的操作
        console.log('DOM 更新完成');
      });
    }
  }
}
</script>