济南网站模板网站建设课件

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>