vue 组件 以及父子组件互相传值交互

最新推荐文章于 2024-04-22 20:28:12 发布
最新推荐文章于 2024-04-22 20:28:12 发布
阅读量109 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangjiakai05/article/details/107550837
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>veuIndex</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="inputValues"/>
        <button @click="handleSubmit">提交</button>
        <todo-item v-for="(item,index) of list" :key="index" :content="item" :index = "index" @delete = "handleDelete"></todo-item>
        <todo-item2></todo-item2>
    </div>
</div>
<script>


    //全局组件
    Vue.component('todo-item', {
        props: ['content', 'index'],//组件接受一个从外部传进来的content值，即:content的值
        template: '<li @click="componentClick">{{content}}{{index}}</li>',//{{content}}即props中定义的content，若不定义则无法使用
        methods: {
            componentClick: function () {
                this.$emit('delete',this.index);//用来对应@delete，然后@delete里的方法定义在父组件的merthods中
            }
        }
    });
    //局部组件
    var TodoItem = {
        template: '<li>itme2</li>'
    };

    new Vue({
        el: "#root",
        components: {
            'todo-item2': TodoItem
        },

        data: {
            list: [],
            inputValues: ''
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.inputValues);
                this.inputValues = '';
            },
            handleDelete : function (index) {
                this.list.splice(index,1);//删除对应下标开始的一项
            }
        }
    })
</script>
</body>
</html>

 

一个不同寻常的程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中js向vue组件传值,Vue 组件之间传值
weixin_26850469的博客
06-18 1074
#同一个路由下，父向子组件传值props属性 -- 单向绑定import childOne from '../components/childOne.vue';export default{data() {return{msg: '我是动态data中的数据！'}},components: {childOne}} {{ info }} {{ msg }} export default{props:...
vue 进阶之实现父子组件间的传值
10-17
在Vue中，父子组件之间的通信主要通过props（属性）从父组件向子组件单向传递数据，以及通过事件（events）从子组件向父组件传递数据。 首先，我们来看一个简单的例子。在这个例子中，我们创建了一个名为`counter`...
vue父子组件交互
dianziagen的博客
03-08 253
重点： 父组件主动获取子组件的数据和方法： alert(this.$refs.header.msg); this.$refs.header.run(); 子组件主动获取父组件的数据和方法： this.$parent.数据 this.$parent.方法 par...
Vue父子组件之间传值交互
//Case
11-07 150
1. 向子组件传值 main.html <!--向子组件传值--> <sys-header :sys-user-name="systitle"></sys-header> header.vue 用props来配置字段, 获取父自检传过来的值 props: ["sysUserName"], //获取父组件传过来的值 2. 向父组件传值 main.html <!--定义事件, 供子组件调用--> <sys-header @getxx="getMenuN
Vue学习笔记 (八) 父子组件通信
weixin_43026567的博客
03-25 144
父子组件的传值 父传子：通过props向子组件传递数据 子传父：通过自定义事件向父组件发送消息 父传子 props验证 1.默认值 props: { cmessage: { type: String, default: '默认值', // 默认值 } 当默认值类型是数组或对象时，default后面必须是一个函数 props: { cmessage: { ...
vue中父子组件传值详解及使用案例
weixin_46221106的博客
07-04 1006
1.父组件向子组件传值 子组件要拿到父组件的 msg 数据， 通过下述语句把父组件的数据绑定到子组件上 <com1 v-bind:parentmsg="msg"></com1> 把父组件传递过来的parentmsg属性，在子组件的props数据中，定义一下，才能使用这个数据 props: ['parentmsg'], 即可在子组件中用插值表达式调用 例： <div id="body"> <!-- 父组件，可以在引用子组件
vue 父子组件传值
qq_33240556的博客
04-22 301
在 Vue.js 中，父子组件间的通信主要通过 Props 和自定义事件（$emit）来进行。
vue3父子组件传值.doc
02-05
在Vue3中，父子组件之间的通信方式相比Vue2有所改变，更加简洁且高效。本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. ...
vue中父子组件注意事项,传值及slot应用技巧
08-27
Vue 中父子组件注意事项、传值及 Slot 应用技巧 在 Vue 中，父子组件之间的交互是非常重要的，特别是在组件之间传递数据和事件时。下面将详细介绍 Vue 中父子组件注意事项、传值及 Slot 应用技巧。 父子组件注意...
Vue 组件间传值及事件触发Demo
09-07
本教程将详细讲解如何在Vue组件间进行值传递以及事件触发，帮助你更好地理解并运用这些概念。 一、组件间传值 1. `props` 下传：父组件向子组件传递数据是最常见的传值方式，通过在子组件定义`props`属性接收父...
详解Vue之父子组件传值
10-17
在Vue框架中，父子组件之间的通信是日常开发中常见的需求。本文将详细解析Vue中父子组件如何进行值的传递，主要包括传递数值、传递方法和传递对象三种方式。 **一、传递数值** 在Vue中，子组件通过`props`属性接收...
asp档案管理系统的设计与实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习
08-10
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习 简历是展示个人经历、技能和能力的重要文档，以下是一个常见的简历格式和内容模板，供您参考： 简历格式： 头部信息：包括姓名、联系方式（电话号码、电子邮件等）、地址等个人基本信息。 求职目标（可选）：简短描述您的求职意向和目标。 教育背景：列出您的教育经历，包括学校名称、所学专业、就读时间等。 工作经验：按时间顺序列出您的工作经历，包括公司名称、职位、工作时间、工作职责和成就等。 技能和能力：列出您的专业技能、语言能力、计算机技能等与职位相关的能力。 实习经验/项目经验（可选）：如果您有相关实习或项目经验，可以列出相关信息。 获奖和荣誉（可选）：列出您在学术、工作或其他领域获得的奖项和荣誉。 自我评价（可选）：简要描述您的个人特点、能力和职业目标。 兴趣爱好（可选）：列出您的兴趣爱好，展示您的多样性和个人素质。 参考人（可选）：如果您有可提供推荐的人员，可以在简历中提供其联系信息。 简历内容模板： 姓名: 联系方式: 地址: 求职目标: （简短描述您的求职意
施耐德ATV61变频器编程手册
08-10
施耐德ATV61变频器编程手册
QorIQ LS1021A Reference Manual Supports LS1020A and LS1022A
08-10
Chapter 1 Overview 1.1 Introduction 1.2 Features summary 1.3 Application examples Chapter 2 Memory Map 2.1 Memory map overview Chapter 3 Signal Descriptions Chapter 4 Reset, Clocking, and Initialization Chapter 5 Interrupt Assignments Chapter 6 Arm Modules Chapter 7 CSU, OCRAM, and MSCM Chapter 8 Interconnect Fabric Chapter 9 Pre-Boot Loader (PBL) Chapter 10 Secure Boot and Trust Architecture Chapter 11 Supplemental Configuration Unit Chapter 12 Device Configuration and Pin Control
Springboot3+Vue3项目源码，彻底掌握Springboot3和Vue3
最新发布
08-10
Springboot3+Vue3项目源码，彻底掌握Springboot3和Vue3
smartSVN-所有版本的license，有效期到2099年
08-10
smartSVN-所有版本的license，有效期到2099年
vue3 父子组件互相传值
08-09
在Vue 3中，可以使用props和emit来实现父子组件之间的数据传递。 1. 使用props传递数据给子组件： 在父组件中使用子组件时，通过props属性将数据传递给子组件。在子组件中，可以通过props选项接收并使用这些数据。 父组件： ```vue <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: '父组件传递的消息' }; } }; </script> ``` 子组件： ```vue <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] }; </script> ``` 在上面的例子中，父组件通过`:message="parentMessage"`将`parentMessage`的值传递给了子组件的`message`属性。子组件通过`props: ['message']`声明了接收名为`message`的prop，并在模板中使用了该值。 2. 使用emit触发自定义事件传递数据给父组件： 在子组件中，可以通过使用`$emit`方法触发自定义事件，并传递数据给父组件。在父组件中，可以通过监听这些自定义事件来处理传递的数据。 子组件： ```vue <template> <button @click="sendMessage">发送消息给父组件</button> </template> <script> export default { methods: { sendMessage() { this.$emit('message-event', '子组件传递的消息'); } } }; </script> ``` 父组件： ```vue <template> <div> <child-component @message-event="handleMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleMessage(message) { console.log('父组件接收到的消息:', message); } } }; </script> ``` 在上面的例子中，子组件通过`this.$emit('message-event', '子组件传递的消息')`触发了名为`message-event`的自定义事件，并传递了消息给父组件。父组件通过`@message-event="handleMessage"`监听了这个自定义事件，并在`handleMessage`方法中接收到了传递的消息。 通过这两种方式，父子组件可以实现双向的数据传递。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值