vue prop属性传值与传引用示例

vue组件在prop里根据type决定传值还是传引用。

简要如下：

传值：String、Number、Boolean

传引用：Array、Object

若想将数组或对象类型也以值形式传递怎么办呢？如下方式可以实现：

// component-A 引用component-B组件
<component-B :person="personList"
       :personBak="person_Bak">
</component-B>

// component-A 部分关键代码

// 将数组复制，personBak与personList是两个“内容”相同但地址不一样的对象(数组),
// 这样可以变相的实现“传值”，person或personBak互不影响
person_Bak = JSON.parse(JSON.stringfy(this.personList));  

//component-B props部分
props: {
  person: {
    type: Object,
    default: {}
  },
  personBak: {
    type: Object,
    default: {}
  }
}

以上这篇vue prop属性传值与传引用示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue props传值失败 输出undefined的解决方法

    如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值: <code class="language-html"><div id="app"> <test :type="type"></test> </div> Vue.component("test", { props: ['type'], template: '<div @cli

  • vue-prop父组件向子组件进行传值的方法

    vue-prop是父组件向子组件进行传递数据时使用的. 例如子组件为 child.vue template: '<div>msg: {{msg}}</div>' props: ['msg'], 我们在子组件里规定了一个数据名字叫msg 父组件里面写 <child msg="hello, vue.js!"></child> 这样我们就可以在子组件里看到msg:hello, vue.js! 以上这篇vue-prop父组件向子组件进行传值的方法

  • Vue 使用Props属性实现父子组件的动态传值详解

    如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo

  • 详解vue父子组件间传值(props)

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

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

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

  • vue中使用props传值的方法

    1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo

  • 解决vue组件props传值对象获取不到的问题

    先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default

  • vue prop属性传值与传引用示例

    vue组件在prop里根据type决定传值还是传引用. 简要如下: 传值:String.Number.Boolean 传引用:Array.Object 若想将数组或对象类型也以值形式传递怎么办呢?如下方式可以实现: // component-A 引用component-B组件 <component-B :person="personList" :personBak="person_Bak"> </component-B> // compone

  • Vue Prop属性功能与用法实例详解

    本文实例讲述了Vue Prop属性功能与用法.分享给大家供大家参考,具体如下: 1 Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: html: <div id="app-1"> <!-- HTML 中是 keb

  • 关于Go 是传值还是传引用?

    关于Go 是传值还是传引用?

    目录 1.Go 官方的定义 2.传值和传引用 2.1 传值 2.2 传引用 3.争议最大的 map 和 slice 3.1 map 3.2 slice 3.总结 关于Go 是传值还是传引用?很多人都讨论起来 下面我们就带着问题一起探索答案吧 1.Go 官方的定义 本部分引用 Go 官方 FAQ 的 "When are function parameters passed by value?",内容如下. 如同 C 系列的所有语言一样,Go 语言中的所有东西都是以值传递的.也就是说,一个

  • python 函数传参之传值还是传引用的分析

    python 函数传参之传值还是传引用的分析

    首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传递. 值传递(passl-by-value)过程中,被调函数的形式参数作为被调函数的局部变量处理,即在堆栈中开辟了内存空间以存放由主调函数放进来的实参的值,从而成为了实参的一个副本.值传递的特点是被调函数对形式参数的任何操作都是作为局部变量进行,不会影响主调函数的实参变量的值. 引用传递(pass-

  • 详解python函数传参是传值还是传引用

    详解python函数传参是传值还是传引用

    首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传递. 值传递(passl-by-value)过程中,被调函数的形式参数作为被调函数的局部变量处理,即在堆栈中开辟了内存空间以存放由主调函数放进来的实参的值,从而成为了实参的一个副本.值传递的特点是被调函数对形式参数的任何操作都是作为局部变量进行,不会影响主调函数的实参变量的值. 引用传递(pass-

  • Java中的传值与传引用实现过程解析

    java函数中的传值和传引用问题一直是个比较"邪门"的问题,其实java函数中的参数都是传递值的,所不同的是对于基本数据类型传递的是参数的一份拷贝,对于类类型传递的是该类参数的引用的拷贝,当在函数体中修改参数值时,无论是基本类型的参数还是引用类型的参数,修改的只是该参数的拷贝,不影响函数实参的值,如果修改的是引用类型的成员值,则该实参引用的成员值是可以改变的,例子如下. 首先是定义改变参数的 public static void changeInt(int i) {// 改变int型变

  • Python参数传递机制传值和传引用原理详解

    首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传递. 值传递(passl-by-value)过程中,被调函数的形式参数作为被调函数的局部变量处理,即在堆栈中开辟了内存空间以存放由主调函数放进来的实参的值,从而成为了实参的一个副本.值传递的特点是被调函数对形式参数的任何操作都是作为局部变量进行,不会影响主调函数的实参变量的值. 引用传递(pass-

  • Go语言参数传递是传值还是传引用

    Go语言参数传递是传值还是传引用

    目录 什么是传值(值传递) 什么是传引用(引用传递) 迷惑Map chan类型 和map.chan都不一样的slice 小结 对于了解一门语言来说,会关心我们在函数调用的时候,参数到底是传的值,还是引用? 其实对于传值和传引用,是一个比较古老的话题,做研发的都有这个概念,但是可能不是非常清楚.对于我们做Go语言开发的来说,也想知道到底是什么传递. 那么我们先来看看什么是值传递,什么是引用传递. 什么是传值(值传递) 传值的意思是:函数传递的总是原来这个东西的一个副本,一副拷贝.比如我们传递一个i

  • 深入理解JavaScript中的传值与传引用

    1.传值(by value) 变量的值被复制出一份,与原来的值将不相干,也就是说即使新的值被修改,原来的值也不会改变,在JavaScript中基本类型都是传值的. 复制代码 代码如下: function testPassValue(){   var m=1;   var n=2;   //将m,n的值复制一份,传递到passValue   passValue(m,n);   alert(m);  //将是原有的值}function passValue(a,b){  a = a+b; //改变a的

  • 通过5个php实例细致说明传值与传引用的区别

    哈哈,会用只是初级阶段,要了解原理是什么,这样才能更好去运用,费话不多说 传值:是把实参的值赋值给行参 ,那么对行参的修改,不会影响实参的值 传引用 :真正的以地址的方式传递参数传递以后,行参和实参都是同一个对象,只是他们名字不同而已对行参的修改将影响实参的值 说明: 传值:根copy是一样的.打个比方,我有一橦房子,我给你建筑材料,你建了一个根我的房子一模一样的房子,你在你的房子做什么事都不会影响到我,我在我的房子里做什么事也不会影响到你,彼此独立. 传引用:让我想起了上大学时学习C语言的指针

随机推荐