vue3基础知识(三)

一.组件的数据传输 我们使用props来传递数据，现在我们有两个组件，一个child，一个parent组件

<template>
<h3>Child</h3>
  <p>{{message}}</p>
</template>

<script>
export default {
  name: "child",
  props:['message']
}
</script>

<style scoped>

</style>

<template>
<h3>Parent</h3>
<!--  在这里传入数据-->
  <child message="这是来自父亲的数据"/>
</template>

<script>
//导入组件
import child from "@/components/child.vue";
export default {
  name: "parent",
  // 在这里注册组件
  components: {
    child
  }
}
</script>

<style scoped>

</style>

主要是三个步骤，导入，注册，然后传递数据，这样我们就可以在接收数据的组件中，用props来接收数据，注意这里传输数据只能是从父级传递到子级。当然这里也可以动态传递参数，不一定是固定的，可以用v-bind等方法进行传输

三.props校验

<template>
  <p>{{ message }}</p>
  <p>{{age}}</p>

</template>

<script>
export default {
  name: "child",
  props: {
    message: {
      type: [String, Number, Object, Array],
    },
    age:{
      type:[Number]
    }



  }
}
</script>

<style scoped>

</style>

格式已经展示了，他可以接收你想要的数据类型（我们可以拿到这个数据，但是不可以修改这个数据） 这里接收字符串和数字可以直接用default，数组需要用工厂函数返回，参考如下

<template>
  <p>{{ message }}</p>
  <p>{{age}}</p>
  <p>{{title}}</p>
  <p v-for=" item in number"> {{item}}</p>

</template>

<script>
export default {
  name: "child",
  props: {
    message: {
      type: [String, Number, Object, Array],
    },
    age:{
      type:[Number],
    },
    title:{
      type:String,
      default:'默认值'
    },
    number:{
      type:Array,
      default(){
        return [100,200,300]
      }
    }
  }
}
</script>

<style>
</style>

四.组件事件（自定义事件）

<template>
  <p>{{ message }}</p>
  <p>{{age}}</p>
  <p>{{title}}</p>
  <p v-for=" item in number"> {{item}}</p>
  <button @click="make_event">点击触发时间</button>

</template>

<script>
export default {
  name: "child",
  props: {
    message: {
      type: [String, Number, Object, Array],
    },
    age:{
      type:[Number],
    },
    title:{
      type:String,
      default:'默认值'
    },
    number:{
      type:Array,
      default(){
        return [100,200,300]
      }
    }

  },
  methods:{
    make_event(){
      this.$emit("someevent",123)
      console.log(555)
    }
  }
}
</script>

<style>
</style>

<template>
<h3>Parent</h3>
<!--  在这里传入数据-->
  <child message="这是来自父亲的数据" age=25 @someevent="make_event2"/>
</template>

<script>
//导入组件
import child from "@/components/child.vue";
export default {
  name: "parent",
  // 在这里注册组件
  components: {
    child
  },
  methods:{
    make_event2(data){
      alert(data)
    }
  }
}
</script>

<style>

</style>

传递的子传父主要是靠关键词$.emit("你要传，调动的事件"，参数)

总结:

父传子 props

子传父 自定义组件