组件通信

组件通信（传值）

父传子

• 传值

//父组件中------------------
//1、父组件传自己的数据info给子组件first
<first :msg='info'></first>

//子组件中------------------
//2、子组件用和data平级的props接收父组件的传值
//props专门接收传值，是一个字符串数组
props:['msg']

//3、子组件使用父组件传的值
<h2>{{msg}}</h2>

• 单项数据流

  父传子的数据：在父组件内可以进行修改，子组件会跟着改变。

  子组件不能修改，会报错

  目的是：防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。也就是防止多个使用该子组件的父组件的数据来源不明确，不知道是谁修改的。

  子组件如果想要更改值并且不影响父组件：（两种方法）

  在传值的第二步，也就是子组件接收值进行，

  使用备份的数据，父组件修改数据不会导致子组件备份的数据变化

  第一种：使用在data里备份的新数据newMsg，可以修改

  第二种：在computed中备份，如果修改得有setter，用于得值

//使用：
<input v-model="newMsg">
<input v-model="newM">
//第一种：data备份
data() {
    return {
        newMsg:this.msg,
    }
},
//第二种：computed备份
computed:{
   newM(){
      return this.msg
   }
},
//父组件的传值
props:['msg']

• props验证(是个对象)

  作用：如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。

  在开发过程中，组件被别人使用时，对正确传值有很大帮助。

//props验证
props:{
    //数据类型
    msg:[String,Number],
    msg1:{
       	type:String,
       	//定义是否必填
       	required:true
    },
    msg2:{
       	type:[Number,String],
		//定义默认值，有默认值就不用添加必填
       	default:'hijk'
    },
	msg3:{
		//自定义校验器
      	validator:function(val){
  	        return val.length > 3	
        }
   	}
}

子传父

//子组件中------------------second

//1、触发,触发事件时传值，在函数里传值
<input type="text" v-model="msg" @input="trans">

//2、传值，$emit发射值，第一个参数是用来在父组件内接收数据时的触发事件，第二个是值
trans:function(){
	this.$emit('eve',this.msg);
}

//父组件中------------------

//3、接收,eve触发执行getD函数
<second @eve='getD'></second>

//4、使用
getD:function(val){
	console.log(val);
}

兄弟传值

//main.js中-----------------
//通过prototype，给vue实例新增一个eventbus方法
//eventbus的值是一个空的vue实例
Vue.prototype.eventbus = new Vue()
//组件中---------------------
components:{
    'tom':{
        //1、tom组件触发,执行tran，
        template:`<div @click="tran">jerry，快来</div>`,
        methods:{
           tran(){
               //2、函数传值
                this.eventbus.$emit('comeon','来吧')
            }
        }
    },
    'jerry':{
        template:`<div>nonononono,做梦</div>`,
        mounted(){
            //3、事件监听，接收传值
            this.eventbus.$on('comeon',(val)=>{
                //4、使用值
            	console.log(val);
            	console.log('做梦');
            })
         },
    }
}