VUE data传值

data 必须是一个函数

上面例子中，可以看到 button-counter 组件中的 data 不是一个对象，而是一个函数：

data: function () {return {count: 0}
}

这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例，如下所示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-on-data事件</title><script src="js/vue.js"></script></head><body><div id="components-demo"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script>var buttonCounter2Data={count:0}Vue.component('button-counter',{data:function(){//data选项是一个对象，会影响到其他实例;return buttonCounter2Data},template:'<button v-on:click="count++">点击了{{count}}次</button>'})new Vue({el:'#components-demo'})</script></body>
</html>

VUE data传值相关推荐

vue方法传值到data_Vue 组件传值几种常用方法【总结】
使用vue也有很多年了,一直都没有整理一下相关知识,给大家总结下开发过程中所遇到的一些坑,主要给大家总结一下vue组件传值的几种常用方法: 1.通过路由带参数传值 ① A组件通过query把id传给B ...
vue组件传值 prop传递对象
vue组件传值 prop传递对象大家经常会使用组件传值,今天我用到的时候突然遇到了一些坑,想着今天来记录一下,大家做一个参考,此篇仅说一下prop传递对象. 子组件接收基本的数据类型子组件 < ...
41. Vue组件传值-父组件向子组件传值
前言前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
vue组件传值的11种方式
不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件在子组件里定义一个props,即props:['ms ...
vue组件传值的十种方式
vue组件传值的十种方式一.props 父传子子组件 // 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: ...
vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化. 本文针对组件之间传值做详细讲解. Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是 ...
【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
vue $data data
vue & $data & data vm.a === vm.$data.a https://vuejs.org/v2/api/#data https://flaviocopes.co ...
vue data为什么是函数_由 Vue 中三个常见问题引发的深度思考
(给前端大全加星标,提升前端技能) 作者: 前端序公号 / SimonWoo (本文来自作者投稿) 前言工作中我们通过搜索引擎或者官方文档很容易就会知道一个语法怎么使用,但是你知道其中的原理吗?我 ...

VUE data传值

data 必须是一个函数

VUE data传值相关推荐

最新文章

热门文章