vue2.0 子组件改变props值,并向父组件传值的方法

为什么我们会有修改 prop 中数据的冲动呢？通常是这两种原因：

prop 作为初始值传入后，子组件想把它当作局部数据来用；

prop 作为初始值传入，由子组件处理成其它数据输出。

对这两种原因，正确的应对方式是：

定义一个局部变量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

定义一个计算属性，处理 prop 的值并返回。

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop

是一个对象或数组，在子组件内部改变它会影响父组件的状态。

我们知道，父组件是使用 props 传递数据给子组件，但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。 https://cn.vuejs.org/v2/guide/components.html#自定义事件

在父组件中定义两个变量，动态绑定到子组件中

子组件：

父组件：定义两个方法，并绑定到子组件自定义事件上

以上这篇vue2.0 子组件改变props值,并向父组件传值的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue父组件通过props如何向子组件传递方法详解
  • vuejs2.0子组件改变父组件的数据实例
  • 详解vue父子组件间传值(props)
  • vue父组件向子组件(props)传递数据的方法
  • vue父组件向子组件动态传值的两种方法
  • vue 子组件向父组件传值方法
赞 (0)

相关推荐

  • vue父组件向子组件(props)传递数据的方法

    vue父组件向子组件(props)传递数据的方法

    vue页面结构 在做项目的时候常常有这样的一个情况,这个页面的数据(比如:id号)要带到另一个页面去查询某个数据的详情等,传统的作法不是在url上加参数,cookie或者是现在H5的"sessionStorage"和"localStorage"上赋值,这是页面之间传递的方法. 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案. 最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(

  • 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父子组件间传值(props)

    先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入

  • vue父组件通过props如何向子组件传递方法详解

    前言 本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意. 例如: 注意:不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) .理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

  • vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组   父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu

  • vuejs2.0子组件改变父组件的数据实例

    在vue2.0之后的版本中,不允许子组件直接改变父组件的数据,在1.0的版本中可以这样操作的,但是往往项目需求需要改变父组件的数据,2.0也是可一个,区别是,当我们把父元素的数据给子组件时,需要传一个对象,子组件通过访问对象中的属性操作数据,下面是演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

  • vue2.0 子组件改变props值,并向父组件传值的方法

    为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用: prop 作为初始值传入,由子组件处理成其它数据输出. 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的值初始化它: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 定义一个计算属性,处理 prop 的值并返回. prop

  • Vue2.0子同级组件之间数据交互方法

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下 接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一.我们先来创建中央事件总线,在src/assets/下创建一个eventB

  • vue2.0数据双向绑定与表单bootstrap+vue组件

    vue2.0数据双向绑定与表单bootstrap+vue组件

    最近一直在用vue,觉得确实是好用. 一,拿数据的双向绑定来说吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> </head> <body> <div id="app"> {{ name }} <input typ

  • 解决vue2.0动态绑定图片src属性值初始化时报错的问题

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <template> <div> <img :src="imgUrl"> </div> </template> <script> export default { data(){ return { captcha_id: &quo

  • Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 2.依然在app.vue文件中,添加样式 不用在任何位置加class,只要在css中写上这个名称,样式自己随意改. 如何在单页切换的时候添加过渡? 1.在app.vue文件中,将router-view包裹在transition中,transition加个name. 2.在app.vue中添加css样式(你的transition的name是什么,第一个单词就是什么) 以上

  • JavaScript组件焦点与页内锚点间传值的方法

    JavaScript组件焦点与页内锚点间传值的方法

    本文实例讲述了JavaScript组件焦点与页内锚点间传值的方法.分享给大家供大家参考.具体分析如下: 上述的这两个小功能在一些新式的手机页面是很有用的. 如何光标放上输入框就触发事件,离开输入框就触发另一个事件呢?即使用户不输入任何东西-- 页间传值很简单,但在页内的锚点之间是如何传值呢? 一.基本目标 有一个页面,上面有一个输入框,一个超级链接,这两个东西是没有任何关联的, 只是因为功能不大,所以把两个功能合起来写 1.输入框功能 一旦把光标放上对话框背景就变成红色,一旦用户的鼠标点击其他地

  • C#简单实现子窗体向父窗体传值的方法

    本文实例讲述了C#简单实现子窗体向父窗体传值的方法.分享给大家供大家参考.具体如下: 击Form1的button1 打开Form2 再点击Form2的button2 在button2_Click事件中 通过this.Owner将Form2的textBox2的值设置给Form1的textBox1 并关闭Form2 public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void bu

  • 详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

    详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

    wc-messagebox 基于 vue 2.0 开发的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生UI(样式来源: MUI) 一些想法 刚开始的时候想要用现成的弹窗组件来着, 但是查找一圈没有发现比较合适项目的, 所以才自己开发了一个, 包含 Alert, Comfirm, Toast, Prompt 四种, 并且可以单个引入. Vue 的组件开发实际上比较简单, 有兴趣的可以看下源码实现, 步骤很清晰. 关于样式的问题, 是直接从 MUI(魅族开

  • webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法

    批处理 前端现在在做项目的时候大多数遇到的都是单页面应用,但有时需要做多页面的时候,会把单页拿过来修改成多页面,如果代码多了,对单页或多页的配置可能会混乱,那么有没有更好的方式能把单页面和多页面不同的配置代码分开,能更清楚的分辩他们的区别,这里是利用 批处理 对前端构建进行部署 git地址目录分为三块 single //单页代码 share // 共用代码 many //多页代码 只需要用到 批处理 对其中两者进行合并就能生成想要的单页或多页应用,提示需要安装国内的 npm淘宝镜像 如果未安装的

  • React中父组件如何获取子组件的值或方法

    React中父组件如何获取子组件的值或方法

    目录 父组件获取子组件的值或方法 方法一 方法二 方法三 React函数式组件传值之子传父 具体案例 效果展示 父组件获取子组件的值或方法 先来说下从哪获取的启发,想要从父组件获取子组件的值或方法... 一次写代码的时候,用 Antd 中的 Modal 包裹了一个子组件,子组件中包含 input 输入框,想要在点击对话框上面确定按钮时(即Modal 自带的 onOk方法),拿到其中输入的值 下面用一个父组件(Father.js)和子组件(Hearder.js)来演示如何能拿到值和方法: 方法一

随机推荐