vue中父/子组件之间的通信(props/$emit)

责编:menVScode 2018-01-28 21:01 阅读(1344)

        父组件中的子组件名字应将驼峰式的名字转换成带有'-'符号形式,标签属性也要转换,标签属性也要转换,可以观察下方例子。

        1、父组件给子组件传递数据

        父组件

<template>
  <div id="app">
    <comp-a :number-to-do=5></comp-a>
  </div>
</template>

<script>
import Vue from 'vue'
import compA from '@/components/a'
export default {
  name: 'App',
  components:{compA},
  data(){ }
}
</script>

        子组件

<template>
    <button>{{numberToDo}}</button>
</template>
<script>
export default {
    props:['number-to-do']
}
</script> 

        在子组件中通过props来获取父组件传递过来的数据变量,当数据变量被声明后,数据变量就成为当前组件的一个属性,跟data对象里面一样。

        props可以传递类型的数据,一种是数组形式,另一种是对象形式。对象形式具体截介绍可查看此篇文章:vue中的props验证

//如果传过来数据不是指定的类型,vue就会发出警告
props:{
    propA: Number, // 指定类型
    propB: [String, Number], // 多种类型
    propC: { type: String, required: true }, // 必传,且为字符串
    propD: { type: Number, default: 100}, // 数值类型,默认值为100
    propE: { type: Number, default: function(){
        return 1000
    }},
    propF: { validator: function(value){return value>10 } } // 自定义验证规则
}

        验证类型为原生构造器:String、Number、FunctionObject、Boolean、Array。

props:{
    count:{
        //type:Number,
        //type:[Number,String],
        //default:10
        //required:true
        validator:function (value){ //value的值就是count的值
            console.log(value);	
            return value > 10	//传过来的值必须大于10
	}
    }
}

        

        2、子组件向父组件传递数据

        父组件

<template>
  <div id="app">
    <input type="text" v-model="myValue">
    <comp-a @my-event="onComaMyEvent" :number-to-do="myValue"></comp-a>
  </div>
</template>

<script>
import Vue from 'vue'
import compA from '@/components/a'
export default {
  name: 'App',
  components:{compA},
  data(){
    return { myValue:'' }
  },
  methods:{
    onComaMyEvent(value){
      console.log('被子组件触发了!——'+value)
    }
  }
}
</script>

        子组件

<template>
    <button @click="emitMyEvent">{{numberToDo}}</button>
</template>
<script>
export default {
    props:{
        'number-to-do':String
    },
    data(){
        return {name:"menvscode.com"}
    },
    methods:{
        emitMyEvent(){
            this.$emit('my-event',this.name)
        }
    }
}
</script>   

            父/子相互传递数据原理图

QQ截图20180128205605

标签: props $emit
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码