10.4 Vue 父子传值

 

简单示例

APP.vue

<template>
  <div>
    <img :src="imgSrc">
    <!-- 父子传值 -->


    <!-- 自定义属性直接 通过属性传值 -->
    <Vheader :cityArray="citys"></Vheader>


    <!-- 自定义事件 -->
    <Vfooter   v-on:addZhuangHandler="addHandler"></Vfooter>
  </div>

</template>

<script>
  import imgSrc from './assets/bili.jpg'
  import Vheader from './components/Vheader'
  import Vfooter from './components/Vfooter'

  export default {
    name: "app",
    data() {
      return {
        imgSrc: imgSrc,
        citys:["山东","北京","深圳"]

      }
    },
    methods:{
      addHandler (str){
        // alert(str)
        this.citys.push(str);
        alert(this.citys);
      }
    },
    components: {
      Vheader,
      Vfooter
    },

  }

</script>

<style scoped>

</style>

Vfooter.vue

<template>
  <footer class="wrap">
    我是Vfooter，我想测试下给父级组件添加数据: <br>
    <button @click="addCunHandler">给父级组件的数据增加点什么，添加一个村庄</button>
  </footer>
</template>

<script>
  export default {
    name: "Vfooter",
    data() {
      return {}
    },
    methods:{
      addCunHandler(){
      //  触发自定义事件
        this.$emit('addZhuangHandler','破村庄');
      },
    },

  }
</script>

<style scoped>

</style>

 Vheader.vue

<template>
  <header class="wrap">

    我是header，我从父级组件那里拿到了数据很开心：
    <ul v-for="item in cityArray">
      {{item}}
    </ul>
  </header>
</template>

<script>
  export default {
    name: "Vheader",
    data() {
      return {}
    },
    methods: {},
    props: {
      cityArray: Array
      // 如果验证不通过会报错
      //  [Vue warn]: Invalid prop: type check failed for prop "cityArray". Expected String with value "山东,北京,深圳", got Array
    },
  }
</script>

<style scoped>

</style>

实例详解

app----->  header

父组件向子组件传值 

<!-- 自定义属性直接 通过属性传值 -->
<Vheader :cityArray="citys"></Vheader>

子组件从 父组件拿值 

　　　　拿值的时候必须要校验类型，

　　　　拿值的时候的要对应父组件的自定义属性一致才可以拿到

props: {
      cityArray: Array
     ]

　　　　如果有错误是拿不到的

　　　　如果写错类型也会报错。

// 如果验证不通过会报错
//  [Vue warn]: Invalid prop: type check failed for prop "cityArray". Expected String with value "山东,北京,深圳", got Arra

footer------->app

子组件向父组件传值

　　在methods 中加入事件触发传值操作

　　利用 $emit() 方法传值

$emit("自定义属性的名字","要被传入的数据")

methods:{
      addCunHandler(){
      //  触发自定义事件
        this.$emit('addZhuangHandler','破村庄');
      },
    },

父组件得到子组件传递值

　　父组件中首先要对子组件中那提供一个自定义的属性

<!-- 自定义事件 -->
<Vfooter   v-on:addZhuangHandler="addHandler"></Vfooter>

　　对这一属性绑定一个事件，接受的数据将会作为参数被此事件调用

methods:{
      addHandler (str){
        this.citys.push(str);
        alert(this.citys);
      }
    },

总结

• 自定义属性传值
• 校验后取值
• $emit("自定义属性的名字","要被传入的数据")