简单Vue项目-组件申明及使用

1. 子组件

代码如下：

<template>
  <h1>{{title}}</h1>
  <p>结果编码：{{result.code}}</p>
  <p>结果信息：{{result.info}}</p>
  <p><el-input :placeholder="placeholder" v-model="inputValue"></el-input></p>
  <el-table :data="list">
    <el-table-column label="序号" type="index" width="50"></el-table-column>
    <el-table-column label="信息" prop="msg"></el-table-column>
  </el-table>
</template>
<script>
  //A
  export default {
    //B
    props: {
      result: {
        type: Object,
        default: () => {
          return {
            code: "code",
            info: "success",
          };
        },
      },
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
      placeholder: {
        type: String,
        default: () => {
          return "请选择";
        },
      },
    },
    data() {
      return {
        title: "返回结果",
        inputValue: ""
      };
    },
     methods: {
      changeTitle(val) {
        this.title = val;
      }
    }
  };
</script>
//C
<style scoped>
</style>

说明：

• A处的export default 中default有什么用，表明export一个对象，在import的时候可以不用加{}。看下述第二步的注释A处。
• B处的props属性，是定义那些值是从父组件传值到子组件。
• C处的<style>标签中的scoped属性是指，当前<style>标签中的配置只属于当前模块。

2. 父组件

代码如下：

<template>
  //E
  <div>
    //B2     C
    <result-page :result="resultObj" placeholder="请选择输入响应" :list="list" ref="resultPage"></result-page>
    <el-button type="default"  @click="click">修改标题</el-button>
  </div> 
</template>

<script>
//A
import resultPage from "@/layout/components/Result.vue"
export default {
  //B1
  components: {
    resultPage
  },
  data() {
    return {
      resultObj: {
        code: "ok",
        info: "查询成功"
      },
      list: [
        {msg:"第一条"},
        {msg:"第二条"}
      ]
    }
  },
  //D
  methods: {
    click() {
      this.$refs.resultPage.changeTitle("修改标题");
    }
  }
}
</script>
<style scoped>
</style>

说明：

• A处引入组件，这里对应第一步子组件中注释A处。这里的Result.vue是文件夹名称，真实地址是下一级的index.vue。
• B1处定义了组件，这个是必须的，这里定义了才能在B2处完成配置使用。
• B2处的标签名是和B1处的一致的，当然与A处的一致。但不需要和上一步子组件的文件名一致。B2处的标签名可以是小写加“-”，也可以和B1处一致。
• C处主要是说明了父组件如何向子组件传值。
• D处一个父组件调用子组件的方法的示例，这里需要配置C处的ref属性。
• E处如果没有加<div>，会报错：Component template should contain exactly one root element。每一个组件都需要一个root标签将他们报起来。