Python Web前端开发篇（5）---vue组件传递数据

1 组件传递数据（父传子）

组件最大的优势是可复用性，我们一般会将Vue组件定义在一个单独的.vue文件中，即单文件组件（SFC）。组件和组件之间不是完全独立的，而是有交集的，那就是组件和组件之间是可以传递数据的，传递数据的解决方案就是props：

父组件传递title变量给子组件：

<template>
  <h3>Parent</h3>
  <Son :title="title"/>
</template>

<script>
import Son from "./Son.vue"
export default {
  data(){
    return{
      title: "你快乐吗！"
    }
  },
  components:{
    Son
  }
}
</script>

<template>
  <h3>Son</h3>
  <p>{{ title }}</p>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  props:["title"]
}
</script>

注意事项：props只能从父级传递给子级，不能反其道而行之。

2 组件传递多种数据类型

<template>
  <h3>Parent</h3>
  <Son :title="title" :money="money" :girlfriends="girlfriends" :boyfriend="boyfriend"/>
</template>

<script>
import Son from "./Son.vue"
export default {
  data(){
    return{
      title: "你快乐吗！",
      money: 100000,
      girlfriends: ["alen", "fake", "fuck"],
      boyfriend:{
        name: "Tom",
        gg: "18cm",
        money: 9999999
      }
    }
  },
  components:{
    Son
  }
}
</script>

<template>
  <h3>Son</h3>
  <p>{{ title }}</p>
  <p>{{ money }}</p>
  <ul>
    <li v-for="(item, index) of girlfriends" :key="index">{{ item }}</li>
  </ul>
  <div>
    <p v-for="(item, index) of boyfriend" :key="index">{{ item }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  props:["title", "money", "girlfriends", "boyfriend"]
}
</script>

3 组件传递Props校验

  props:{
    title:{
      type: String,
      default: "你咋不给我传值呢",
      required: false
    },
    money:{
      type: [Number, String, Array],
      required: false
    },
    girlfriends:{
      type: Array,
      default(){
        return ["母胎solo"]
      },
      required: false
    },
    boyfriend:{
      type: Object,
      default() {
        return {
          name: "xiba",
          gg: "1cm",
          money: -999999
        }
      },
      required: false
    }
  }

可以通过修改props的type属性规定变量类型，可以是一种类型，也可以是多种类型。default属性规定变量的默认值，但是array类型、对象类型不能直接使用default设置，需要换成工厂函数的形式返回默认值。required属性规定变量的可选属性，为true的时候，如果父类不传递值则报错。

注意：props传递过去的数据是只读的，子类无法修改父类传递的数据。

4 组件事件（子传父）

 子：

<template>
  <h3>Son</h3>
  <div>
    <button @click="clickEvent">触发父类</button>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    clickEvent(){
      this.$emit("fatherEvent", "传过去的数据")
    }
  }
}
</script>

父：

<template>
  <h3>Parent</h3>
  <Son @fatherEvent="aaa" />
</template>

<script>
import Son from "./Son.vue"
export default {
  data(){
    return{

    }
  },
  components:{
    Son
  },
  methods:{
    aaa(data){
      console.log("触发了", data)
    }
  }
}
</script>

通过自定义事件$emit，实现子类向父类的数据传递。

5 组件事件配合v-model使用（子传父）

子类ComponentB：

<template>
  <h3>ComponentB</h3>
  <input type="text" v-model="search">
</template>

<script>
export default {
  data(){
    return{
      search: ""
    }
  },
  // 侦听器
  watch:{
    search(newValue, oldValue){
      this.$emit("searchEvent", newValue)
    }
  },
  emits: ["searchEvent"]
}
</script>

父类ComponentA：

<template>
  <h3>ComponentA</h3>
  <ComponentB @searchEvent="getSearchValue"/>
  <p>搜索内容:{{ search }}</p>
</template>

<script>
import ComponentB from "./ComponentB.vue"
export default {
  data(){
    return{
      search: ""
    }
  },
  components:{
    ComponentB
  },
  methods:{
    getSearchValue(data){
      this.search = data
    }
  }
}
</script>