Vue 中父子组件数据传递

2019-02-11 admin

父组件 -> 子组件 传递数据

父组件 -> 子组件传递数据,可以通过属性的形式

<div id="root">
    <counter :count="0"></counter>      //:counter 获取到的是数字,counter 获取到的是字符串
    <counter :count="1"></counter>
</div>
let counter = {
    props:['count'],                //子组件 接收 父组件传递过来的内容
    template: '<div>{{count}}</div>',   //模版中就可以使用这个数据了
}
let vm = new Vue({
    el: '#root',
    components:{
        counter
    }        
})

组件中:counter=“1”获取到的是数字,counter=“1”获取到的是字符串,因为加了冒号后,后面值就是js表达式了,它就不是字符串了。它是一个js表达式,当然就是数字类型了。

父组件通过属性的形式,向counter这个子组件传递了一个名字叫做counter的数据,子组件需要接收一下才能使用这个数据。

在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的。

子组件 修改 传递数据

<div id="root">
    <counter :count="0"></counter> 
    <counter :count="1"></counter>
</div>
let counter = {
    props:['count'],
    template: '<div @click="handleClick">{{count}}</div>',
    methods: {
        handleClick(){
            this.count ++
        }
    }
}
let vm = new Vue({
    el: '#root',
    components:{
        counter
    },    
})

直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接修改父组件传递过来数据,如下图:

这是为什么呢?

在 Vue 当中有个单向数据流的概念,也就是父组件可以向子组件通过属性的形式传递参数,你传递的参数可以随便修改,也就是说父组件可以随意的向子组件随意的传递参数,但是子组件绝对不能反过来去修改父组件传递过来的参数。

之所有 Vue 之中有单项数据流的概念,原因在于,一旦你的子组件接受的数据不是基础类型时,例如对象,也就是引用类型的数据时,你在子组件里面改变了传递过来的数据,有可能这个数据还被其他子组件使用,这样你这个子组件改了这个数据,不仅仅影响你你这个组件,还可能对其他的子组件造成影响。

所以 Vue 里面说,我有一个单向数据流,你子组件不能改变父组件传递给你的数据,那该怎么办呢?

看下面代码

<div id="root">
    <counter :count="0"></counter> 
    <counter :count="1"></counter>
</div>
let counter = {
    props:['count'],
    data(){
        return {
            number: this.count
        }
    },
    template: '<div @click="handleClick">{{number}}</div>',
    methods: {
        handleClick(){
            this.number ++
        }
    }
}
let vm = new Vue({
    el: '#root',
    components:{
        counter
    },    
})

在子组件中用data接收下父组件传递过来的参数,用number来保存,页面中显示也用number,点击子组件时只需修改number就可以了。

子组件 -> 父组件 传递数据

<div id="root">
    <counter :count="2" @inc="handleIncrease"></counter>
    <counter :count="3" @inc="handleIncrease"></counter>
    <div>{{total}}</div>
</div>
let counter = {
    props:['count'],
    data(){
        return {
                number: this.count
            }
    },
    template: '<div @click="handleClick">{{number}}</div>',
    methods:{
        handleClick(){
            this.number = this.number + 2
                this.$emit('inc', 2)
        }
    }
}
let vm = new Vue({
    el: '#root',
    components: {
        counter
    },
    data: {
        total:5
    },
    methods: {
        handleIncrease(step) {
            this.total += 2
        }
    }
})

当我点击组件时,handleClick会被触发,number会被改变,number改变时,用this.$emit触发inc事件,counter组件中监听inc事件,执行函数handleIncrease,在函数中对total操作。

父组件通过属性的形式向子组件传值,子组件通过事件触发的形式向父组件传值,而且父子组件传值的时候还有一个隐性的规定,也就是单向数据流。父组件可以向子组件传递任何的数据,但是子组件不能修改父组件传递过来的数据,如果你一定要修改,就需要拷贝一个副本出来,你去用这个副本,修改这个副本就可以了。

原文链接:https://segmentfault.com/a/1190000018120340

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53536.html

文章标题:Vue 中父子组件数据传递

相关文章
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
回到顶部