在组件中获取数据

二、组件中的data为什么必须要是函数？

父组件给子组件传递数据——props属性

第一种写法：

第二种写法：

第三种写法：

传默认值：

父组件传子组件数据——引用类型的两种写法

第一种：数组与对象的写法

第二种Function类型：

在组件中获取数据

看下面这个例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>组件数据的获取</title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><cpn1></cpn1></div><script type="text/javascript">const vm = new Vue({el: '#app',components: {cpn1: {template: `<div>{{msg}}</div>`,data() {return {msg: 'Nanchen'}},}}})</script></body>
</html>

打印结果：

在局部组件中添加cpn1标签并且在添加data组件

二、组件中的data为什么必须要是函数？

这里看个例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>data必须是函数</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><style type="text/css">h2{display: inline-block;}button{width: 35px;height: 35px;line-height: 35px;}</style></head><body><div id="app"><h2>data不使用函数时：</h2><cpn1></cpn1><cpn1></cpn1><hr><h2>data使用函数时：</h2><cpn2></cpn2><cpn2></cpn2><hr></div><template id="cpn1"><div><button @click="message--">-</button><h2>{{message}}</h2><button @click="message++">+</button></div></template><template id="cpn2"><div><button @click="message--">-</button><h2>{{message}}</h2><button @click="message++">+</button></div></template><script type="text/javascript">const obj = {message: 0};const vm = new Vue({el: '#app',components: {cpn1: {template: '#cpn1',data() {return obj}},cpn2: {template: '#cpn2',data() {return {message: 0}}}}})</script></body>
</html>

实现效果：

可以看到，如果这个例子的return直接返回这个obj，那么上下的＋－会同时进行

如果在data中使用函数时，它不会进行联动。显而易见，第二种使用函数的这个具有独立性，用起来更方便

简单的来说：如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。

也可以这样理解：data没使用函数时把数据放在了栈内存中，data使用函数时把数据放在堆内存里

父组件给子组件传递数据——props属性

使用props属性，父组件向子组件传递数据

props数组写法：

props: ['cmovies', 'cmessage']

对象写法：

props: {
cmessage: {
type: String, // 类型限制
default: 'zzzzz', // 默认值
required: true //在使用组件必传值
}
}

如果其中的类型是Object或者为Array类型，其默认值必须是一个函数

第一种写法：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>父组件给子组件传递数据</title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><cpn1 :msg="message"></cpn1></div><template id="cpn1"><div>I·am {{aaa}}</div></template><script type="text/javascript">const vm = new Vue({el:'#app',data(){return{message:'NanChen'}},components:{cpn1:{template:'#cpn1',data(){return{aaa:this.msg}},props:['msg']    //数组写法}}})</script></body>
</html>

效果如下：

第二种写法：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>第二种写法</title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><cpn1 :msg="message"></cpn1></div><script type="text/javascript">Vue.component('cpn1', {template: `<div>My name is{{msg}}</div>`,props: {msg: {type: String}}})const vm = new Vue({el: '#app',data() {return {message: ' NanChen'}},})</script></body>
</html>

效果如下：

第三种写法：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>第三种方法</title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><cpn1 :msg="message"></cpn1></div><script type="text/javascript">const vm = new Vue({el: '#app',data() {return {message: ' NanChen'}},components: {cpn1: {template: `<div>My name is{{msg}}</div>`,props: {msg: {type: String}}}}})</script></body>
</html>

效果如下：

当然方法还有很多，这里就不一一举例了。

下面演示一下如果父组件传两个及以上的写法：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><cpn1 :msg="message" :one="first"></cpn1></div><script type="text/javascript">const vm = new Vue({el:'#app',data(){return{message:'Welcome to',first:" Nanchen's blog"}},components:{cpn1:{template:`<div>Hello everyone,{{msg}}——{{one}}</div>`,props:{msg:{type:String},one:{type:String}}},}})</script></body>
</html>

效果如下：

传默认值：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><cpn1 :msg="message" ></cpn1>   <!--:num="nums"--></div><script type="text/javascript">const vm = new Vue({el:'#app',data(){return{message:"My name is NanChen",// nums:"I'm 50 years old"}},methods:{},components:{cpn1:{template:`<div>{{msg}}--{{num}}</div>`,props:{msg:{type:String},num:{type:String,default:'欢迎来到Nanchen的博客',    // 如果上方没有nums值就会显示默认值里的文字required:true  //可以使用required选项来声明这个参数是否必须传入。}}}}})</script></body>
</html>

required：声明这个参数是否必须传入。

父组件传子组件数据——引用类型的两种写法

第一种：数组与对象的写法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><cpn1 :msg="message1"></cpn1><cpn2 :msgs="message2"></cpn2></div><script type="text/javascript">const vm = new Vue({el:'#app',data(){return{message1:['Nan','Chen'],message2:{name:'NanChen',age:39,sex:'unknown',},}},components:{cpn1:{template:`<div>这是一个数组，其包含：{{msg}}</div>`,props:{msg:{type:Array,},}},cpn2:{template:`<div>My name is {{msgs.name}} I'm {{msgs.age}} years old</div>`,props:{msgs:{type:Object}}}},})</script></body>
</html>

效果如下图：

第二种Function类型：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>父传子引用类型</title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><cpn1 :msg="add"></cpn1><h2>{{count}}</h2></div><script type="text/javascript">const vm = new Vue({el:'#app',data:{count:0},methods:{add:function(){return this.count++;}},components:{cpn1:{template:`<div><button @click="sum">+</button></div>`,props:{msg:{type:Function  // 引用类型},},methods:{sum(){this.msg()}}}}})</script></body>
</html>

效果：

Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型相关推荐

父activity启动子activity并传递数据
1. Intent component : activity,service,broadcast receiver以及content provider component 与操作系统通信的一种媒介工 ...
GIT将本地项目上传到Github（两种简单、方便的方法）
GIT将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安 ...
git学习（10）:Git的使用--如何将本地项目上传到Github（两种简单、方便的方法）
将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装gi ...
简单轻松的将本地项目上传到Github的两种简单方法
如何将本地项目上传到Github 将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 二.第二种方法: Git命令查看.添加.提交.删除.找回,重置修改文件查看文件diff 查 ...
java默认值_java 基本数据类型初始值(默认值)
1.int类型定义的数组,初始化默认是0 2.String类型定义的数组,默认值是null 3.char类型定义的数组,默认值是0对应的字符 4.double类型定义的数组,默认值是0.0 5.flo ...
函数参数缺省值/默认值
一.基本概念缺省值又叫默认值,指函数形参有默认值. 有缺省值的情况下,可以不写实参就调用函数. 例: void fun(int a = 12); 二.全部指定与部分指定全部指定即形参全部都有默认值 ...
java布尔值默认值是_Java中的布尔值和布尔值的默认值
Java中boolean(原始)和boolean(原始包装器)的默认值是什么? Boolean(对象)的默认值为null. Boolean(原始)的默认值为false. 请添加官方源链接任何Obje ...
将本地项目上传到Github的两种方式 1.在线上传 2.使用Git客户端上传
文章目录注册GitHub账号并创建仓库上传本地项目到Github的方式一:在线上传上传本地项目到Github的方式二:使用Git客户端上传 Windows下安装Git客户端 Git配置本地用户名 ...
[ASP.NET] 限制上传文件类型的两种方法(转)
通常,为了防止因用户上传有害文件(如木马.黑客程序)引发的安全性问题,Web程序都会对用户允许上传的文件类型加以限制.而本文将要介绍的就是如何在ASP.NET应用程序中利用Web Control的内置 ...
主线程是如何向子线程传递数据的?_c++ 利用thread创建线程
用进行多线程开发小时候,老师总是教育我们上课要专心,"一心不可二用".可是CPU这个不听话的"熊孩子"偏偏却在一个芯片中加入了两个甚至多个运算核心,想要一&q ...

Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型

在组件中获取数据

二、组件中的data为什么必须要是函数？

父组件给子组件传递数据——props属性

第一种写法：

第二种写法：

第三种写法：

传默认值：

父组件传子组件数据——引用类型的两种写法

第一种：数组与对象的写法

第二种Function类型：

Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型相关推荐

最新文章

热门文章

Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型

在组件中获取数据

二、组件中的data为什么必须要是函数？

父组件给子组件传递数据——props属性

第一种写法：

第二种写法：

第三种写法：

传默认值 ：

父组件传子组件数据——引用类型的两种写法

第一种：数组与对象的写法

第二种Function类型：

Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型相关推荐

最新文章

热门文章

传默认值：