第八篇:Vue组件传参

组件传参

父传子

1)在子组件内部通过props设置组件的自定义属性

props: ['abc', 'goods']

2)在父组件渲染子组件是对自定义属性赋值即可

<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>

示例代码:

子组件示例代码

<template>
    <div class="goods-box">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>

<script>
    export default {
        name: "GoodsBox",
        // 在组件内部通过props定义组件的自定义属性
        props: ['abc', 'goods'],
    }
</script>

<style scoped>
    .goods-box {
        width: 260px;
        height: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 20px;
        float: left;
        overflow: hidden;
        text-align: center;
    }
    img {
        width: 260px;
        height: 260px;
    }
</style>

父组件示例代码

<template>
    <div class="goods">
        <div class="main">
            <!-- 在使用子组件是对自定义属性赋值即可 -->
            <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods" />
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";

    let goods_list = [
        {
            img: require('@/assets/img/001.jpg'),
            title: '小猫',
        },
        {
            img: require('@/assets/img/002.jpg'),
            title: '小猫儿',
        },
        {
            img: require('@/assets/img/003.jpg'),
            title: '小狗',
        },
        {
            img: require('@/assets/img/004.jpg'),
            title: '小狗儿',
        },
    ];

    export default {
        name: "Goods",
        data () {
            return {
                goods_list,
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>

子传父

前提:子组件是被父组件渲染的,所以子组件渲染要晚于父组件。

1)在这个前提下,子组件一定要满足一个条件,才能对父组件进行传参(某个时间节点 === 某个被激活的方法)

eg: i)子组件刚刚加载成功,给父组件传参 ii)子组件某一个按钮被点击的时刻,给父组件传参 iii)子组件要被销毁了,给父组件传参

2)在子组件满足条件激活子组件的方法中,对父组件发生一个通知,并将数据携带处理(自定义组件事件)

<div class="goods-box" @click="boxClick"></div>
methods: {
    boxClick () { this.$emit('receiveData', this.goods.title, '第二个数据', '第三个数据') }
}

<!--例如此处,子组件被点击后,对父组件发送通知,receiveData是自定义的事件名字,后面的是传送的数据-->

3)在父组件渲染子组件时,为自定义事件绑定方法

<GoodsBox @receiveData="recFn"/>

4)在父组件实现绑定方法时,就可以拿到子组件传参的内容(接收到了通知并在父组件中响应)

recFn(title, data2, data3) {
    console.log('接收到了' + title);
}

组件标签不能绑定系统定义的事件,没有意义,子组件的事件都是在自己内部完成

示例代码:

子组件示例代码

<template>
    <div class="goods-box" @click="boxClick">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>

<script>
    export default {
        props: ['abc', 'goods'],
        methods: {
            boxClick () {
                // 通知父级 - 自定义组件的事件
                this.$emit('receiveData', this.goods.title)
            }
        }
    }
</script>

父组件示例代码

<template>
    <div class="goods">
        <div class="main">
            <!-- 实现自定义事件,接收子组件通知的参数 -->
            <GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
    export default {
        name: "Goods",
        data () {
            return {
                goodsTitle: '哪个',
            }
        },
        methods: {
            recFn(title) {
                console.log('接收到了' + title);
                this.goodsTitle = title;
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>

原文地址:https://www.cnblogs.com/cnhyk/p/12324757.html

时间: 2024-10-02 23:00:28

第八篇:Vue组件传参的相关文章

vue组件传参

一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以直接用<自定义标签></自定义标签>样子使用.当前组件为父组件,被引入的组件为子组件. 引入子组件 注册子组件 使用子组件 1.2.特殊父子组件 在路由中定义好组件,组件中含有children,页面上通过<router-view></router-view>形式

Vue 子组件向父组件传参

直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"><

vue 父子组件传参

父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法).而子组件componetA中,声明props参数'msgfromfa'之后,就可以收到父向子组件传的参数了.例子中将msgfromfa显示在<p>标签中.App.vue中 1 1<component-a ms

从 Vue 的视角学 React(四)—— 组件传参

组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式,和各自的优缺点 一.父组件传参到子组件 和 Vue 一样,React 中从父组件到子组件的传参也是通过 props 不过在 Vue 项目中,需要在先组件里定义将要接收的 props,而 React 可以直接获取 而且 props 不光可以接收 Number.String 等基本类型,还可以接收 Fu

前端vue 跨组件传参,cokies,axion

路由跳转 ? 1 2 3 4 5 6 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</rout

组件传参

一.两个平行组件传参 新建bus.js import Vue from 'vue' export var bus = new Vue() App.vue里created方法里定义事件 import { bus } from 'bus.js' // ... created () { bus.$on('tip', (text) => { alert(text) }) } Test.vue组件内调用 import { bus } from 'bus.js' // ... bus.$emit('tip'

Vue路由传参的几种方式

原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具体区分和使用后续分析. 参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html params传参(url中显示参数)

跨组件传参,cookies组件,axios组件

路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

1218 组件分类,组件传参

目录 昨日内容 组件 1.概念 2.组件分类 特点 根组件 局部组件 全局组件 3.组件传参 父传子 子传父 作业 Vue项目环境的搭建 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue基础总结 昨日内容 """ 1.表单指令: v-model="变量" 变量与value有关 普通:变量就代表value值 单选框:变量为多个单选框