Vue中组件数据的传递

wayneli 发布于2019-08-21 16:21 / 1518人阅读

摘要：中组件的作用域是隔离的，父组件中的数值子组件看不到也就是说，用作比喻，组件的天生是的如果父组件需要往子组件中传数据，此时应该使用标签属性子组件中，用声明这个值即可。总结中基本类型值默认单向传递，双向加。

Vue中组件的作用域是隔离的，父组件中的数值子组件看不到！也就是说，用angular作比喻，组件的scope天生是scope:()的！
如果父组件需要往子组件中传数据，此时应该使用标签属性：

子组件中，用props声明这个值即可。并且在template里面可以直接使用{{c}}来获得这个属性，而不需要写为{{this.props.c}}

import Vue from "vue";

const MyCompo = Vue.extend({
    template : `
        
            我是MyCompo组件，我的a值是{{a}}
            子组件c：{{c}}
            
        
    `,
    props : ["c"],
    data : function(){
        return {
            a : 1, 
            b : 2
        }
    },
    methods : {
        add : function(){
            this.a ++;
        }
    }
});

export default MyCompo;

如果父组件中要传一个动态的值（就是父组件的data，不是死数），此时要用v-bind:来传递。
v-bind指令表示动态属性。

此时我们研究，子组件改变了这个值，父组件的值变不变。答：默认情况下不变！



import Vue from "vue";

const MyCompo = Vue.extend({
    template : `
        
            我是MyCompo组件，我的a值是{{a}}，我的c值是：{{c}}
            

        
    `,
    props : ["c"],
    methods : {
        add : function(){
            this.c ++;
        }
    }
});

export default MyCompo;

子组件的c值变化了，但是外面不变！
也就是说，默认情况下，父组件中的属性值如果传给儿子，子组件改变这个值，仅仅改变子组件中的值，父组件中的值不变。

如果非要让子组件能够改变父组件中的值，要加sync修饰符：

上面的c属性是一个基本类型值常数3。此时我们试试引用类型值。
父组件中增加d属性，值是json。

import Vue from "vue";
import MyCompo from "./components/MyCompo.js";

new Vue({
    el : "#app",
    data : {
        c : 333,
        d : {
            v : 8888
        }
    },
    components : {
        "my-compo" : MyCompo
    }
});

传给子组件：




    
    Vue学习


    
        我是父亲，我的c： {{c}} ，我的d:{{d | json}}

子组件改变d的时候，父亲也变了！！！虽然我们没加.sync。
总结：
Vue中基本类型值默认单向传递，双向加sync。
引用类型值，默认双向传递。

小tip，v-bind的缩写语法就是冒号。

属性可以验证类型、必填等等。

props : {
        "c" : null,
        "d" : null,
        "e" : {
            type : Number,
            required : true
        }
},

云服务器 GPU云服务器 java中数据的传递 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88440.html

Vue 单文件中的数据传递

摘要：两个同级组件之间传递数据，通过传递数据。准备工作，我新建了个文件，分别是实例根组件，包含和组件的父组件，的同级组件父组件向子组件传递数据，通过传递数据。 Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两...

darry 2019-08-20 15:16 评论0 收藏0
Vue组件基础与通信

摘要：组件基础与通信一脚手架简介与安装之前安装的是模块，之后安装的是模块。如果是三级组件通信，该如何处理比如父组件与孙子组件通信。和，提供和注入实现祖先组件和后代组件之间通信。 Vue组件基础与通信一、vue cli脚手架 ① vue cli 简介与安装 vue cli 3.0之前安装的是vue-cli模块，vue cli 3.0之后安装的是@vue/cli模块。如果已经全局安装了旧版本的...

I_Am 2019-08-26 10:48 评论0 收藏0
vue组件通信全面总结

摘要：当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过传入内部组件在创建高级别的组件时非常有用。写在前面组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟...

余学文 2019-08-23 12:16 评论0 收藏0
vue组件间通信、数据传递（父子组件，同级组件）

总结一下对vue组件通信的理解和使用。一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 父组件 app.vue 请输入单价: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 评论0 收藏0
vue组件间通信、数据传递（父子组件，同级组件）

总结一下对vue组件通信的理解和使用。一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 父组件 app.vue 请输入单价: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

tunny 2019-08-01 17:58 评论0 收藏0
vue中组件之间传递数据的方法

摘要：在父组件中，需要引用子组件的地方，传入数据。其实这种方法和中控制器之间传递数据的有点类似的。作用域在vue中，组件实例的作用域是孤立的，父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。下面几种方法可以实现组件之间数据的传递。通过prop传递数据 1）在子组件中，使用prop属性，显示的...

singerye 2019-08-20 18:19 评论0 收藏0