分享Vue子组件接收父组件传值的3种方式

目录
  • 1.简单声明接收
  • 2.接收数据的同时进行 类型限制
  • 3.接收数据的同时对 数据类型、必要性、默认值 进行限制

父组件代码↓

<template>
    <div>
        <div>父组件</div>
        <Student :name="name" :age="age"></Student>
    </div>
</template>

<script>
    // 引入组件
    import Student from './components/Student'
    
    export default {
        name: 'App',
        components: {Student,},
        data() {
            return {
                name: "张三",
                age: 18
            }
        }
        
    }
    
</script>

1.简单声明接收

<template>
    <div>
        <div>子组件</div>
        <h2>学生姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {}
        },
        
        // 简单声明接收 ----------
        props: ['name', 'age']
        // ---------------------
        
    }
</script>

2.接收数据的同时进行 类型限制

<template>
    <div>
        <div>子组件</div>
        <h2>学生姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {}
        },
        
        // 接收数据的同时进行类型限制 ---
        props: {
            name: String,
            age: Number
        }
        // --------------------------
        
    }
</script>

3.接收数据的同时对 数据类型、必要性、默认值 进行限制

<template>
    <div>
        <div>子组件</div>
        <h2>学生姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {}
        },
        // 接收数据的同时对 数据类型、必要性、默认值 进行限制 -----
        props: {
            name: {
                type: String,      // name传入类型必须为字符串
                required: true    // name设为必传字段
            },
            age: {
                type: Number,
                default: 233      // 默认值
            }
        },
        // ------------------------------------------------
    }
</script>

到此这篇关于分享Vue子组件接收父组件传值的3种方式的文章就介绍到这了,更多相关Vue子组件接收父组件传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue父组件给子组件的组件传值provide inject的方法

    一般情况下我们父子之间的传值用的是props,这个就不多说了,但是如果想让父给子组件的组件传值怎么办呢,这里我们就可以用到 provide 和 inject(依赖注入) provide/inject需要一起使用,我们可以从父组件的provide传值,子组件或者孙组件,就可以用inject来接受子组件的provide属性值 具体的可以看官网介绍provide/inject:https://cn.vuejs.org/v2/api/#provide-inject 下面我们可以写个简单的例子来演示一下

  • vue 父组件给子组件传值子组件给父组件传值的实例代码

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{title}}</h2> //title必须是父组件传递的 </template> <script> export default (){ props:["title"] //可以是数组,也可以是对象 //如何对title进行校验 //props:{ // t

  • VUE子组件向父组件传值详解（含传多值及添加额外参数场景）

    一.子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChang

  • vue 子组件和父组件传值的示例

    一.子组件向父组件传值 1:子组件中(例:) 2:父组件中(例:) 二.父组件向子组件传值 1:父组件中(例:) 2:子组件中(例:) 以上就是vue 子组件和父组件传值的示例的详细内容,更多关于vue 子组件和父组件传值的资料请关注我们其它相关文章!

  • Vue父组件向子组件传值以及data和props的区别详解

    1.在父组件中定义 msg 属性 data:{ msg:'123 -我是父组件中的数据' }, 2.引用子组件 父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用. 把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上. <com1 :parentmsg="msg"></com1> 3. 在子组件定义部分,需要把父组件传递过来的 parentmsg 属性,先在pro

  • vue 组件间的通信之子组件向父组件传值的方式

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就

  • 分享Vue子组件接收父组件传值的3种方式

    目录 1.简单声明接收 2.接收数据的同时进行 类型限制 3.接收数据的同时对 数据类型.必要性.默认值 进行限制 父组件代码↓ <template>     <div>         <div>父组件</div>         <Student :name="name" :age="age"></Student>     </div> </template> <

  • vue中实现子组件接收父组件方法并获取返回值

    目录 子组件接收父组件方法并获取返回值 父组件 GetCallback.vue 子组件 CallbackChild1.vue 子组件接收父组件的另一种方法 子组件接收父组件方法并获取返回值 项目中有时候会遇到父子组件传值的问题,比如子组件需要接收父组件方法并获取该方法返回值的时候. 使用this.$emit('方法名', '参数1', '参数2')的方式,获取到不是父组件方法的return值.但是我们可以将参数改为回调函数的形式,父组件里执行该回调函数,返回值后给子组件,子组件再接收返回值. 示

  • vue中兄弟组件传值的两种方式小结

    vue中兄弟组件传值的两种方式小结

    目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到

  • vue 子组件向父组件传值方法

    子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子

  • Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)

    目录 子组件使用this.$emit()向父组件传值 第一步 在父组件中引入子组件 第二步 子组件向父组件传值 子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <indexImport

  • Vue子组件向父组件传值示范方法

    目录 一.要点概述 二.分步讲解 三.总代码和运行结果 一.要点概述 子组件:通过某种事件(这里是@click点击事件,也可以是其他事件)发送数据,this.$emit('事件名',要传的数据) 父组件:在标签内部@子组件中定义的事件名,等于一个函数(这里是rev),通过rev(val)这个函数接收数据,把val赋值给自己的数据 二.分步讲解 初始化Vue实例,可以理解为父组件,在父组件中的data中初始化一个变量(parentmsg),用来接收值: let vm = new Vue({ el:

随机推荐