vue学习p45-p60

scoped样式冲突p48

默认情况:写在组件中的样式会全局生效-因此很容易造成多个组件之间的样式冲突问题。

  1. 全局样式:默认组件中的样式会作用到全局
  2. 局部样式:可以给组件加上scoped属性,可以让样式只作用于当前组件

scoped原理:
3. 给当前组件模板的所有元素,都会被添加上一个自定义属性data-v-hash值
4. css选择器后面,被自动处理,添加上了属性选择器

data是一个函数p49

一个组件的data选项必须是一个函数。-保证每个组件实例,维护独立的一份数据对象。

export default {
    data(){
        return{
            count:999
        }
    }
}

什么是组件通信p50

组件通信,就是指组件与组件之间的数据传递。

  • 组件的数据是独立的,无法直接访问其他组建的数据。
  • 想用其他组件的数据-组件通信

组件关系分类只有是否父子关系。

  1. 父子关系:props(父传子,写在子接收export那里)和$emit(子传父)
  2. 非父子关系:(1)provide &inject (2)eventbus
  3. 通用解决方案:vuex(适合复杂业务场景)

props

 <!-- 1.给组件标签,添加属性的方式,传值 -->
    <SbHeader :title="mytitle"></SbHeader>
export default {
  //2.子通过props接收(数组接受多个传值)
  props:['title']
  
}
 <div>
      <!-- 3.渲染使用 -->
      我是son组件{{ title }}
    </div>

&emit

methods:{
    handleClick(){
      //子中 $emit1.$emit触发事件,给父元素发送消息通知
      this.$emit('changeTitle','传值')
    }
  }
 <!--  父中$emit2.父组件监听事件 -->
    <SbHeader :title="mytitle" @changeTitile="changeFn"></SbHeader>
methods:{
    //父中$emit3.提供处理函数,形参中获取参数
    changeFn(newTitle){
      this.mytitle =newTitle
    }
  }

props详解p51

定义:组件上注册的一些自定义属性
作用:向子组件传递数据
props效验: 不能乱传,控制台会有错误提示-帮助开发者快速发现错误

语法:

  1. 类型校验 2. 非空校验,必传属性 3. 默认值 4. 自定义校验
    (1)类型校验
export default {
    // props:[w]
    props:{
        w:Number//校验的属性名:类型 
    }
};

(2)1. 类型校验 2. 非空校验,必传属性 3. 默认值 4. 自定义校验

export default {
    // props:[w]
    props:{
        w:Number,//类型校验
        required:true,//必传的属性
        default:0,//默认值
        validator(){
            return false//自定义校验
        }
    }
};

prop&data 单向数据流

共同点:都可以给组件提供数据
区别:

  • data数据自己的-随便改
  • prop数据外部的-不能直接改,要遵循单向数据流,要通过$emit给父改

非父子通信(拓展)-event bus 事件总线p55

作用:非父子组件之间(倾向于同层级),进行简易消息传递。(复杂场景-vuex)

  1. 创建一个都能访问到的事件总线(空vue实例)-utils/EventBus.js
  2. A组件(接收方),监听Bus实例的事件。
  3. B组件(发送方),触发Bus实例的事件。
//在js中,创建一个都能访问到的事件总线(空vue实例)-utils/EventBus.js
import Vue from 'vue'

const Bus =new Vue()
export default Bus
 created(){
        //非父子2.在接收方,进行监听Bus的事件($on是监听)
        Bus.$on('sendMsg',(msg)=>{
	this.msg=msg
        })
    },
clickSend(){
      //非父子3.发送方触发事件的方式传递参数(发布消息)(触发事件用$emit)
      Bus.$emit('sendMsg','有病')

    }

非父子通信(拓展)provide&inject p56

provide&inject作用:跨层级共享数据

  1. 父组件provide提供数据
  2. 子/孙组件inject取值使用

v-model详解p57

v-model原理

vue学习p45-p60_第1张图片

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

  1. 表单类组件封装
    (1)父传子:数据应该是父组件props传递过来的,v-model拆解绑定数据
    (2)子传父:监听输入,子传父给父组件修改
<template>
  <div>
    <select :value="cityId" @change="handleChange">
      <option value="101">101</option>
      <option value="102">102</option>
      <option value="103">103</option>
    </select>
  </div>
</template>

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

<style>
</style>
<template>
  <div class="app">
    <BaseSelect :cityId="selectId"
    @changeId="selectId=$event"></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from "./components/BaseSelect.vue";
export default {
  data() {
    return {
      selectId: '102',
    };
  },
  components: {
    BaseSelect,
  },
};
</script>

<style>
</style>

.sync修饰符p58

作用:可以实现子组件与父组件的双向绑定,简化代码
特点:prop属性名,可以自定义,非固定为value
场景:封装弹框类的基础组件,visible属性true显示false隐藏
本质 就是:属性名和@uodate:属性名 合写

 <div class="app">
    <!-- :visible.sync =>:visible+ @update:visible-->
    <BaseSelect :visible.sync="showoff"></BaseSelect>
  </div>
 close(){
        this.$emit('update:visible',false)
      }

ref和$refs p59

作用:利用ref和$refs可以用于获取dom元素,或组件实例
特点:查找范围-当前组件内(比queryselect更精确稳定)
(1)获取dom

  1. 目标标签-添加ref属性
  2. 恰当时机,通过this.$refs.xxx获取目标标签
      <option ref="sb" value="101">101</option>
    const myChat =echarts.init(this.$refs.sb)

(2)获取组件:

  1. 目标组件-添加ref属性
  2. 恰当时机,通过this.$refs.xxx获取目标组件,就可以调用组件对象里面的方法
    <BaseSelect ref="baseherf"></BaseSelect>
    <button @click="handleset">set</button>

 methods:{
    handleset(){
      console.log(this.$refs.baseherf.close())
    }
  },

vue异步更新和$nextTick p60

显示之后立刻获取焦点是不能成功的
vue是异步更新dom(提升性能·)

this.isShowEdit=true//显示输入框
this.$refs.inp.focus()//获取焦点

n e x t T i c k : 等 d o m 更新后,才会触发执行此方法里的函数体语法 : t h i s . nextTick:等dom更新后,才会触发执行此方法里的函数体 语法:this. nextTick:dom更新后,才会触发执行此方法里的函数体语法:this.nextTick(函数体)

this.$nextTick(()=>{
	this.$refs.inp.focus()
})

你可能感兴趣的:(vue.js,学习,前端)