Vue学习笔记3.1 子-父组件传递数据 v-bind、v-on、$emit()

最新推荐文章于 2022-12-16 15:42:03 发布
最新推荐文章于 2022-12-16 15:42:03 发布
阅读量693 收藏
点赞数 1
分类专栏： Vue.js 文章标签： Vue 子向父传递组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soulwyb/article/details/85341265
版权

子向父传递组件：

示例：

在通过点击列表元素后自动删除所点击的列表。

先放完整的代码先：

<!DOCTYPE html>
<html>
<head>
  <title>TodoList</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="inputvalue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
      <todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in List" v-on:delete="handleItemDelete"></todo-item>
    </ul>
  </div>
</body>
<script>

var TodoItem = {
  props: ['content', 'index'],
  template: "<li v-on:click='handleDeleteClick'>{{content}}</li>",
  methods: {
    handleDeleteClick: function() {
      this.$emit('delete', this.index)
    }
  }
}

  var app = new Vue({
    el: "#app",
    data: {
      List: [],
      inputvalue: ''
    },
    methods: {
      handleBtnClick: function() {
        this.List.push(this.inputvalue)
        this.inputvalue = ''
      },
      handleItemDelete: function(index){
        this.List.splice(index, 1)
      }
    },
    components: {
      TodoItem: TodoItem
    }
  })
</script>
</html>

 

1.子组件建立点击事件发生数据变更函数触发：

    $emit()中的第一个参数是事件名（名字随便取），第二个是传出的参数

var TodoItem = {
  props: ['content', 'index'],
  template: "<li v-on:click='handleDeleteClick'>{{content}}</li>",
  methods: {
    handleDeleteClick: function() {
      this.$emit('delete', this.index)
    }
  }
}

2.父组件通过监听delete(根据$emit中的第一个参数名字来决定）

      <todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in List" v-on:delete="handleItemDelete"></todo-item>

3.根据监听delete的函数进行数据处理完成子-父传递数据的过程：

      handleItemDelete: function(index){
        this.List.splice(index, 1)
      }

对了 v-bind==:

v-on==@ 也就是说

v-bind:content="item"   == :content="item"

v-on:click="handleBtnClick == @click="handleBtnClick

@凌晨三点半
关注
专栏目录
vue学习笔记（超详细）
jiey0407的博客
03-09 5626
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
vue 学习笔记
weixin_43971312的博客
05-22 2256
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
Vue父子组件数据传递方式
Cao_Mary的博客
05-12 624
使用Vue的同学，本文一、二两个小结必须掌握。 Vue父子组件数据传递方式一*、父组件给子组件传递数据二*、父组件给子组件传递方法三、子组件给父组件传递数据四、组件数据多级传递五、组件方法多级传递 一*、父组件给子组件传递数据 1在父组件中通过v-bind传递数据 传递格式 v-bind:自定义接收名称 = "要传递数据" 2在注册组件的子组件中通过props接收数据 接收格式 props: [“自定义接收名称”] <!DOCTYPE html> <html lang="en">
Vue父子组件v-model双向绑定
weixin_33725515的博客
10-16 942
Vue父子组件v-model双向绑定 父组件 v-model部分绑定的就是要往子组件传的参数 子组件 props获取value即为传进来的参数 但是在子组件用的是 checked，没有用 value，重新定义了一个新的变量 在改变的时候通过 $emit 重新赋值，父组件可以查看一下有没有变动 转载于:https://juejin.im/post/5bc584ccf265da0aa74f54...
vue学习十(prop传参、v-bind传参、$emit向父级发送消息、input组件上使用 v-model、事件抛值)
全干工程师
09-28 8203
文章目录基本示例组件的复用通过 Prop 向子组件传递数据v-bind 来动态传递 prop通过 $emit 事件向父级组件发送消息使用事件抛出一个值在组件上使用 v-model 基本示例 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用 &lt;div id="components-de...
Vue - 父子组件之间传值（v-bind / props、$emit / v-on）
技术共享，共同进步！
05-16 5241
       在 vue 项目中经常需要父子组件之间进行传值，在传值过程中可能会遇到很多问题；下面来详细讲解父子组件传值的使用，及使中常见问题的解决方案。一. 父组件向子组件传值1. 简单使用父组件向子组件传值2. 深入使用父组件向子组件传值，子组件动态获取父组件传值二. 子组件向父组件传值 一. 父组件向子组件传值 父组件：通过 v-bind 的形式进行传递 例：通过 v-bind 属性把 parentItem 的值赋给 parentA
vue调用组件的属性_Vue父子组建之间的传值及父子组件之间相互调用属性或方法...
weixin_39588104的博客
12-21 141
Vue父子组建之间的传值：一、父子组建之间的传值1.1 父组件向子组件传值父组件向子组件传值是通过属性的方式 传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。1. 在父组件中引入子组件；2. 并在components中注册子组件；3. 通过属性向子组件中传值。//1. 引入子组件import child from'./c...
Vue 学习笔记（全）
qq_47284422的博客
08-04 908
Vue入门 简述 ​ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。 MVVM模式的实现者 Model：模型层，在这里表现 JavaScript 对象 View：视图层，在这里表示 DO
Vue 2.0 学习笔记（四）
weixin_44772326的博客
01-10 4053
组件和生命周期：Vue中的组件化开发，组件的生命周期，组件之间的数据共享传值，ref引用。
Vue - v-on的使用
热门推荐
qq_33962481的博客
07-26 1万+
文章目录一、事件监听 一、事件监听 如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令
vue利用v-bind动态绑定属性和props实现父向子传值
八佾舞于庭
10-10 6821
v-bind 动态绑定属性 比如src class  style以及自定义属性如下面代码所示data columns urllazy  v-bind动态绑定  //父组件中引入子组件 import treeTable from '../../common/TreeGrid.vue'; components: { treeTable, } //父组件中子组件标签 &lt;tree-ta...
学习vue的第二天 v-bind的进阶用法
qq_34176561的博客
05-19 243
今天学习了vue中的v-bind进阶用法 v-bind:style v-bind:key v-bind:class 代码展示的是通过 :class给标签动态加入或删除class名 接着是给按钮添加取反方法和封装一个函数对象 按钮修改上方span标签的颜色，黑黄切换 v-bind 和 v-for结合可以做很多实质性的功能，比如tab切换， 下方是实现从citys中遍历对象到页面中，之后用@click给点中的元素添加样式来实现变色 指令的值不仅可以直接写数据，比如：<h3 :style=
【VUE3使用记录】父子组件通信方式总结
最新发布
cpsxn的博客
12-16 7761
vue3父子组件之间通信方式，双向绑定与单向绑定的区别
Vue中 v-bind、v-model、以及父给子传值
weixin_43377049的博客
09-06 3239
Vue中 v-bind、v-model、以及父给子传值
vue中父传子，父传孙说明
lixu_boke的博客
03-28 2160
先来说一下，vue中父传往子组件用v-bind绑定属性，在子页面用props接收，子传往父的用$emit this.$emit('change',data)，data就是你要传的数据，change为父页面中绑定的事件 说一下父传孙的，在vue2中可以使用v-bind="$attrs" 这个咱们统一上代码说： 当然还有别的方法 在vue版本为2.2.0以上的也可以使用provide与inject 还能使用eventBus来传参接参 当然大部分时候会使用vue...
v-bind用法：类动态绑定对象 数组 style样式 及函数方法
m0_48639378的博客
07-27 1829
v-bind用法：类动态绑定对象 数组 style样式 及函数方法
vue学习之(prop传参、v-bind传参、$emit向父级发送消息、input组件上使用 v-model、事件抛值)
迪迦 • 奥特曼
08-08 1900
基本示例 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用 <div id="components-demo"> <button-counter></button-counter> </div> <script> Vue.component('button-counter', {
浅谈v-bind和父子组件传值
走在秃头的路上的博客
02-16 2889
v-for:属性名=“表达式” 可以简写为 :属性名=“表达式” 假如有这样一个例子 ：count=“0”,如果不加：，也就是v-for ，0代表的就是一个字符串，加上v-for代表的就是表达式，也就是数字0，换一个说法，如果count=“0+1”，加上v-for就是1，不加就是0+1，（只是个人理解，欢迎指正） 还有就是用v-for给子组件传数据，那么子组件就要接收一下 &amp;amp;amp;lt;div id...
Vue基础只父子组件传值v-bind的使用
u014265398的博客
11-01 660
一.代码示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue基础之父子组件传值之v-bind的使用</title> </head> <body> <div id="app"> <child-b :a="a"></child-b> </div> </bo
Vue自定义组件中v-model数据绑定详解及示例
在Vue.js中，`v-model` 是一种简洁的数据绑定方式，尤其在创建自定义组件时，它能够方便地管理组件内的状态并与父组件进行数据交互。这篇文章详细讲解了如何在Vue自定义组件中利用`v-model`进行数据绑定，以便实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@凌晨三点半

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值