关于前端:Vue-父子组件间的通信

父组件向子组件传值

1. 应用 props 形式传值，父组件援用组件，应用组件后，可通过子组件内定义的 props 属性，
   应用该属性名传值到子组件内;
2. props 能够传入 String,Number,Object,Boolean,Array 数据类型;
3. prop 验证：设置 required 参数 可抉择是否以后属性必传;
4. default 设置如若不传将展现的内容;
5. props 传值为单向数据流;
   留神: 子组件内不能间接批改父组件传来的 props；、;

创立父组件

<template>
  <div class="root">
    <h1>this is father</h1>
     <show-name :first-name="nick_name" last-name="jack" />
  </div>
</template>
<script>
import showName from './children'
export default{
  components:{showName,},
  data(){
      return{nick_name:'Tom'}
  }
}
</script>

创立子组件

<template>
  <div class="root">
    this is children
    <p>{{first-name}}</p>
    <p>{{last-name}}</p>
  </div>
</template>
<script>
export default{
  props:{
    'first-name':{
      type:String,
      required:true,
    },
    'last-name':{
      type:String,
      default:'Jack'
    }
  },
  data(){return{}
  }
}
</script>

子组件向父组件传值

1. 子组件向父组件传值，不能间接实时传递数据，必须通过事件触发。
2. 通过 $emit 办法 实现父子间通信；

Father

<template>
  <div class="root">
    <h1>this is father</h1>
    parent: 这是我的子组件传给我的值 {{num}}
     <show-name :first-name="nick_name" last-name="jack" @getNum="getValue" />
  </div>
</template>
<script>
import showName from './children'
export default{
  components:{showName,},
  data(){
      return{
        nick_name:'Tom',
        num:''
      }
  },
  methods:{getValue(val){this.num=val;}
  }
}
</script>

Child

<template>
  <div class="root">
    this is children
    <p>{{first-name}}</p>
    <p>{{last-name}}</p>
    <button @click="sendValue"> 点击向父组件发送音讯 </button>
  </div>
</template>
<script>
export default{
  props:{
    'first-name':{
      type:String,
      required:true,
    },
    'last-name':{
      type:String,
      default:'Jack'
    }
  },
  data(){
      return{num:0}
  },
  methods:{sendValue(){this.$emit('getNum',this.num++);
    }
  }
}
</script>