Vue3--组件间传值
使用组件
同级目录下新建两个文件，一个文件命名为 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>
