Vue3--组件间传值

Z时代
2024-01-10
分类：综合

vue

使用组件

同级目录下新建两个文件，一个文件命名为 test1.vue ，一个命名为 index.vue 组件

在 test1.vue 下写入如下代码

<template>
    <div>
       <div>Hello World</div>
    </div>
</template>
<script>
export default {
}
</script>

这样我们就写了一个组件，可以在其他地方引用，在 index.vue 里使用子组件，使用子组件有如下三步

导入子组件

声明子组件

引用子组件

<template>
    <div>
      <!-- 3.使用子组件，标签的格式就可以 -->
       <test />  
    </div>
</template>
<script>
import Test from './test1'  // 1.导入子组件
    export default {
      components:{ Test }, // 2.声明子组件
        data(){
            return{
            }
        }
    }
</script>

打开 index.vue 可以看到 Hello World 已经渲染在页面上了

父组件传值给子组件

上面我们使用了子组件，但是子组件里的数据是我们写死的，我们可以通过 v-bind 在父组件里传值给子组件，在子组件里接受父组件的值，需要用到 props 属性

修改子组件 test1.vue，接收父组件里传来的值

test1.vue

<template>
    <div>
        <!-- 2.使用父组件里传来的值 -->
       <div>{{ content }}</div>
    </div>
</template>
<script>
export default {
    // 接受父组件里传来的值，在 props 里接收
    props:["content"]
}
</script>

父组件里传值给子组件

index.vue

<template>
    <div>
      <!-- 3.使用子组件，标签的格式就可以 -->
      <!-- 4.给子组件传值，content 为子组件声明的变量，name 为父组件里 data 声明的变量（你好，世界） -->
       <test :content='name'/>  
    </div>
</template>
<script>
import Test from './test1'  // 1.导入子组件
    export default {
      components:{ Test }, // 2.声明子组件
        data(){
            return{
                name:'你好，世界'
            }
        }
    }
</script>

刷新 index.vue 页面

子组件校验数据类型

上面我们父组件往子组件里传了 name 数据，但是在子组件里如果只想要一个 number 类型的数据，怎么办？我们可以在子组件里接收的时候做个校验，修改 test1.vue

<template>
    <div>
        <!-- 2.使用父组件里传来的值 -->
       <div>{{ content }}</div>
    </div>
</template>
<script>
export default {
    // 接受父组件里传来的值，在 props 里接收
    props:{
        content: Number // 期望的是个 Number 类型的，但传过来的是个 String 类型的，控制台会抛出错误
    }
}
</script>

只需要把类型 Number 改为 String 就可以了

<template>
    <div>
        <!-- 2.使用父组件里传来的值 -->
       <div>{{ content }}</div>
    </div>
</template>
<script>
export default {
    // 接受父组件里传来的值，在 props 里接收
    props:{
        content: String // 接收的是个 String 类型的
    }
}
</script>

常见的类型有：String（字符串）、Number（数字）、Boolean（布尔值）、Array（数组）、Object（对象）、Function（函数）

上面只验证了数据类型，还可以验证是否必填，在修改子组件 test1.vue 里的代码

<template>
    <div>
        <!-- 2.使用父组件里传来的值 -->
       <div>{{ content }}</div>
    </div>
</template>
<script>
export default {
    // 接受父组件里传来的值，在 props 里接收
    props:{
        content: {  // 如果有多个的时候，这里就是一个对象
            type: String, // String 类型
            required: true, // 必填
            default: function(){   // 默认值 ，也可以不写成函数格式，如 default: false    default: []
                return '邹邹'
            },
            validator:function( value ){ // 自定义校验， value 就是父组件传来的值，也就是 content
                return value == '你好，世界'
            }
        }
    }
}
</script>

传递其他类型的数据

子组件

<template>
  <el-dialog
    :title="title"
    :closeOnClickModal="false"
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
    width="500px"
  >
    <el-form
      :rules="rules"
      ref="formData"
      label-width="100px"
      label-position="right"
      style="width: 400px"
      :model="formData"
    >
      <el-form-item label="分组名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入分组名称"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="SubmitForm('formData')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    dialogFormVisible: {
      type: Boolean, // 接收的是一个布尔类型
      default: false,
    },
    formData: {
      type: Object, // 接收的是一个对象
      default: [],
    },
    remoteClose: Function, // 接收的是一个函数
    project_id: null,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

父组件

<template>
  <div>
    <!-- 使用子组件 -->
    <group
      :title="group.title"
      :dialogFormVisible="group.dialogFormVisible"
      :formData="group.formData"
      :project_id="project_id"
      :remoteClose="remoteClose"
    ></group>
    <edit
      :title="testcase.title"
      :dialogSaveVisible="testcase.dialogSaveVisible"
      :formData="testcase.formData"
      :project_id="project_id"
      :remoteClose="remoteClose"
    ></edit>
  </div>
</template>
<script>
import Group from "./group"; // 导入子组件
import Edit from "./edit";
export default {
  components: { Group, Edit }, // 声明子组件
  data() {
    return {
      project_id: this.$route.params.project_id, // 项目 id
      currentNode: "",
      group: {
        title: "",
        dialogFormVisible: false,
        formData: {
          id: "",
          name: "",
        },
      },
      // 保存测试用例
      testcase: {
        title: "保存测试用例",
        dialogSaveVisible: false,
        formData: {
          id: "",
          apilist: "",
        },
      },
    };
  },
  methods: {
    remoteClose() {
      this.group.dialogFormVisible = false; // 关闭新增分组的弹框
      this.testcase.dialogSaveVisible = false; // 关闭新增 testcase 的弹框
      this.group.formData = {
        id: null,
        name: "",
      };
      this.fetchData(); // 刷新数据
      this.GroupData();
      this.currentNode = ""; // 更新后置为空
    },
  },
};
</script>