vue自定义组件使用

1.定义组件 HelloWorld.vue

<template name="HelloWorld" >  <!-- 定义组件的名称为HelloWorld -->
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
// 定义组件的名称为HelloWorld
  name: 'HelloWorld',
// 定义组件内部使用的属性
props: {
// 自定义一个变量，用于接受父组件（首页或者其他页面）传入的参数值
    msg: String ， //给组件传递的参数类型
    age: Number,
    stu: Object
  }
}
</script>

2.调用组件

1. 组件文件只导入是不能被调用的
   2.必须在 components 中注册组件
   3.注册后在 <template> 中就可以通过组件名直接引用组件了
   在 <template> 中组件以标签形式存在，标签名为组件名。
   其中msg是在 HelloWorld 中定义的 props 参数，表示需要传递给组件的数据。
   调用组件.png

3. 组件参数传递

组件传递参数的类型：String、Number、Boolean、Array 和 Object 等。当传递数值类型时，必须使用 v-bind 指令进行设置，此时的参数表示一个表达式而不是一个字符串。
在向组件传递除 String 以外的类型时，都通过 v-bind 进行参数的绑定。

image.png