vue的v-model指令总结之通信方式总结

一、v-model指令总结

1、用在表单元素或组件中
2、用在表单元素上
 文本框或密码框相当于:value="数据"+@input="数据=$event. target. value'"
 复选框:checked="数据" +@change="数据=$event. target. checked"
 下拉列表:selected="数据" +@change="数据= $event. target. selected"
3、用在组件实现父子数据双向绑定
 :value="数据" + @input=" 数据=$event"

二、通信方式总结

1、父传子

? ? 父组件内：在自组件标签上， 写属性

? ? 子组件内：通过props属性接收

2、子传父

? 子组件内： 通过: $emit(“自定义事件”,参数，参数2)

? 父组件内：子组件标签上， : @自定义事件名="函数式"

3、祖孙

爷爷：provide () {}爷爷传送
孙子：inject: ['']? 孙子接受
? ? ? ??

4、兄弟

通过evenbus事件总线
? ? ? methods: {
? ? handleClick () {
? ? ? // 使用数据方 通过$on订阅
? ? ? vm.$on('useMsg', (data) => {
? ? ? ? console.log(data)
? ? ? })
? ? }
? ? methods: {
? ? handleClick () {
? ? ? vm.$emit('useMsg', this.msg)
? ? }
? },?

5、ref(ref属性值:ref属性所在的dom或组件 )

   ①ref加在普通的元素上，用this.ref.name获取到的是dom元素；

   ②ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组件的所有方法；

   ③如何利用v-for和ref获取一组数据或者dom节点。

   当v-for用于元素或者组件的时候，引用信息将是包含dom节点或组件实例的数组；

   关于ref注册时间的重要说明：因为ref本身是作为渲染结果被创建的，在初始渲染的时候，你不能访问它们--它们还不存在！$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

6、vuex--->后期发

?