Vue学习日记——Day 3

一、scoped样式冲突

1、默认情况下，写在组件中的样式会全局生效——>因此很容易造成多个组件之间的样式冲突
而为样式加上scoped可以将样式转为局部样式
2、如：
<style scoped> </style>
3、原理：
给当前组件模板的所有元素，都会被添加上一个自定义属性data-v-hash值

二、data函数

1、一个组件的data选项必须是一个函数。 ——>保证每个组件实例都维护独立的对象 2、如：

    return {
        count:100        
    }     } ```

3、使用时依旧是{{count}}

注：vue命名时有规范化要求，文件名需要是驼峰式或者用-来分割

三、组件通信

1、就是组件与组件之间的数据传递
2、概念：组件的数据都是独立的，无法直接访问其他组件的数据
3、组件关系分类：
    3.1、父子关系
         通信：props和$emit
    3.2、非父子关系
         通信：provide & inject
           或：eventbus
    3.3、复杂通信：Vuex
4、通信方式
    4.1、父 ——> 子通信：
        父组件通过props传递数据给子组件，
        如：
        1、给父组件以添加属性的方式传值
        <son :title="myTitle"></son>
        ...
        2、在在子组件中通过props获取
            props: ["myTitle"]
        3、在模板中直接使用
            我是 Son 组件 {{myTitle}}
    4.2、子 ——> 父通信：
        子组件通过$emit通知父组件
        如：
        1、给子组件添加发送信息
            this.$emit('标识','传递的值')
        2、在父组件中监听通知
            @表示 = "处理传递值函数"
        3、提供处理函数，形参为传递的值
            ...(一个函数)

四、prop详解

1、定义：组件上注册的一些自定义属性
2、作用：向子组件传递数据
3、概述：

1、props可以接受任意数量的参数
   如：
       :username="username",
       :password="password",
       ...
       props:['username','password']
       
2、props校验：可以对props传入的类型进行要求
   如：
       props:{
           参数名{
               type:类型,        //Number,String,Boolean
               required:true,   //是否必填
               default:默认值,  //默认值
               validator(value){
                   //自定义校验逻辑
               return 是否通过校验           
               }                                                                                             
           }
       }

五、prop & data、单向数据流

1、props传来的数据不能直接修改，需要通过通知到父组件，让父组件删除

如：
    handleAdd(){
        this.$emit('changeCount',this.count + 1)    
    }
    ...
    handelchange(newCound){
        this.count = newCound    
    }

六、非父子通信

1、event bus事件总线

1、作用：非父子组件之间，进行简易消息传递。(复杂场景使用VueX)

2、用法：
    2.1、先创建一个都能访问到的事件总线(空Vue实例) ——>untils/EventBus.js
        //建议放在utils文件夹中
        import Vue from 'vue'
        const Bus = new Vue()    //创建vue实例
        export default Bus
        
    2.2、接收方监听Bus实例的事件
        Bus.$on('sendMsg',(msg) => {    //实例名.$on(事件名,行为)
            this.msg = msg'        
        })
        
    2.3、发送方触发Bus实例的事件
        Bus.$emit('sendMsg','这是一个消息')
        

2、Provide & inject

1、作用：跨层级共享数据

2、语法：
    2.1、在父组件中用provide提供数据
        provide(){
            return {
            //普通类型【非响应式】
            //非响应式：即不会及时修改
            color:this.color,
            //复杂类型【响应式】   
            userInfo:this.userInfo
            }                      
        }
        
    2.2、在子/孙组件中用inject取值使用
        inject:['color','userInfo'],
        created(){
            console.log(this.color,this.userInfo)        
        }
        

二、v-model详解

1、原理：本质上是一个语法糖。例如应用在输入框上，就是value和input的合写

2、作用：提供双向绑定

如：
     <input v-model="msg" type="text">
     相当于
     <input :value="msg" @input="msg = $event.target.value" type="text">   
     //注：$event用在模板中，是用于获取事件的形参

3、示例：

	<template>
	  <select :value="cityId" @change="handleChange">
	    <option value="1">北京</option>
	    <option value="2">上海</option>
	    <option value="3">天津</option>
	    <option value="4">深圳</option>
	  </select>
	</template>
	
	<script>
	export default {
	    props:{
	      cityId:{
	        type:Number,
	      }
	    },
	    methods:{
	      handleChange(e){
	        this.$emit('Idchange',e.target.value)
	      }
	    }
	}
	</script>

4、简写

	1、子组件通过适应v-model的语法，使父组件可以通过v-model直接读取
	如：
	<template>
	  <select :value="cityId" @change="handleChange">
	    <option value="1">北京</option>
	    <option value="2">上海</option>
	    <option value="3">天津</option>
	    <option value="4">深圳</option>
	  </select>
	</template>
	
	<script>
	export default {
	    props:{
	      value:{//v-model获取的是value值
	        type:String,
	      }
	    },
	    methods:{
	      handleChange(e){
	        this.$emit('input',e.target.value)
	        //v-model接受的事件是input
	      }
	    }
	}
	</script>
	...
	//父组件内
	v-model="selectId"

三、.sync修饰符

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

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

3、场景：封装弹框类的基础组件，visible属性 true显示 false隐藏

	
	如：
	    //父组件
	    <BaseDialog :visible.sync="isShow">
	    ...
	    //子组件
	    props:{
	        visible:Boolean    
	    }
	    methods:{
	      handleChange(e){
	        this.$emit('update:cityId',e.target.value)
	        //update:cityId：
	        //update是固定的
	      }
	      

4、本质上就是:属性名和@update:属性名的合写

四、ref和$refs

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

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

3、使用：

	1、为目标添加标签 - 添加ref属性
	    <div ref="chareRef">容器</div>
	    
	2、通过this.$refs.xxx获取目标标签
	    console.log(this.$refs.chareRef)
    

五、Vue异步更新、$nextTick

1、需求：编辑标题，编辑框自动聚焦

2、$nextTick

2.1、作用：等DOM更新后，才会执行此方法内的函数体

2.2、语法：this.$nextTick(函数体)

示例：
    this.$nextTick(() => {
        this.$refs.inp.focus()
        //等待DOM更新后再执行    
    })