数据通信——父传子，子传父，组件之间

父传子

//父组件
 <Child :message="toZi"></Child>
 import Child from  './zi';
    export default {
        name: "fu",
        data(){
            return{
                toZi: '父传给子的数据'
            }
        },
        components:{
            Child
        }
    }

//子组件
       <p>这个数据是：<span>{{message}}</span></p>
       props:{
          message:{
              type: String,
              required: true
          }
        },

延伸
props
1、props:["message"]
2、

        props:{
          message:{
              type: String,
              required: true
          }
        },
//这样设置当父组件传来的不是String类型时，会有警告出现，如果我传来的是数组，那么会出现，vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "message". Expected String, got Array.

props能验证的数据类型：
1、String
2、Number
3、Boolean
4、Object
5、Array
6、Function
可以通过下面的例子详细看一下

 props: {
      // 必须是数字类型
      message_number: Number,
      // 必须是数字或者字符串
      message_string_number: [String, Number],
      // 必须是布尔值，如果没有定义，默认值就是true
      message_boolean: {
        type: Boolean,
        default: true
      },
      // 必须是数字，而且必须传
      message_must: {
        type: Number,
        required: true
      },
      // 如果时数字或者对象，默认值必须时一个函数来返回
     // 这个里面父组件里面设置toZi: undefined
      message_arr: {
        type: Array,//这个type要和下面的return里面的数据类型相对应的就可以
        default() {
          return [1, 2]
        }
      },
    //这个时候会显示默认的【1，2】
      // 自定义一个验证函数
      message_function: {
        validator(value) {
          return value > 20
//如果小于20控制台会有警告信息 vue.esm.js?efeb:591 [Vue warn]: Invalid prop: custom validator check failed for prop "message".
        }
      }
    }

有一个场景
父组件传值，子组件保存把它当作当前页面的初始值，然后后续使用

父组件
  <input type="text" v-model="toZi">
  <Child :message="toZi"></Child>

 <p>这个数据是父组件传过来的：<span>{{message}}</span></p>
  <p>{{sub_message}}</p>
  <p><input type="text" v-model="sub_message"></p>

  data(){
            return{
                sub_message: this.message
            }
     }

这个时候的操作效果就是

效果图.png

在子组件自己内部保存的值，后续父组件再次变化，子组件也不会变

第二种方法利用$refs

//父组件
 <Child ref="child"></Child>
 <button @click="toZi">父组件</button>

   toZi(){
      this.$refs.child.toZi('123')
    }

//子组件
 toZi(message){
      this.zi = message
}

this.$refs.child可以看到子组件里面的各个方法，属性值

子传父

//父组件

        <Child @toFu = exports></Child>
        <p>{{this.message}}</p>

        methods:{
           exports(m){
               console.log('--');
               console.log(m);
               this.message = m;
           }
        }

        mounted() {
            this.$emit('toFu',{
                message: '这是子数据'
            })
        }

这种情况是页面一加载，子组件就把数据传递给父组件了
还有的就是，比如说数据变换的时候传递给父组件，这个时候可以用watch，，如果是input还可以在上面绑定事件，在事件里emit

fu组件
       <Child @toFu = exports @toFu1 = exports1 @toFu2 = exports2></Child>
        <p>{{this.mess1}}</p>
        <p>{{this.mess2}}</p>
        <p>{{this.mess3}}</p>

       methods:{
           exports(m){
               this.mess1 = m;
           },
            exports1(m){
               this.mess2 = m;
            },
            exports2(m){
               this.mess3 = m;
            }
        }

zi组件

     <input type="text" v-model="m1">

    <input type="text" v-model="m2" @change="emits">


     data(){
            return{
                // sub_message: this.message,
                m1: '这是子数据2',
                m2: '这是子数据3'
            }
        },
        watch:{
            'm1':function(){
                this.$emit('toFu1',{
                    message: this.m1
                })
            }
        },
        mounted() {
            this.$emit('toFu',{
                message: '这是子数据1'
            })
            this.$emit('toFu1',{
                message: this.m1
            })
            this.$emit('toFu2',{
                message: this.m2
            })
        },
        methods:{
            emits(){
                this.$emit('toFu2',{
                    message: this.m2
                })
            }
        }

WX20190927-163844@2x.png

组件之间
evenBus

在common文件夹下新建bus.js
import Vue from 'vue';
export default new Vue();

组件a
    Bus.$emit('toB','123')
组件b
    Bus.$on('toB',message=>{
        console.log(message);
        this.messB = message;
     })

遇到的问题
控制台报出vue warn
Do not use built-in or reserved HTML elements as component id: XXX
这说明xxx是关键字
关键字如下

区分大小写
'html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template'

不区分大小写
'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font,font-face,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view,true

知识点
$ref除了可以在父传子中应用，还可以有其他用处,比如修改dom元素

    <p ref="pRef">相关信息</p>
    console.log(this.$refs.pRef);//能获取p这个dom元素和上面的相关信息也可以利用这个修改dom
     this.$refs.pRef.style.color = 'red';// 修改html样式

注：ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。