关于Vue中组件传值,以及emit方法的一些个人理解
这是我的第一篇blog。作为一个old fashion的后端刚刚准备转前端的一个纯小白,最近一直在跟着慕课网的Dell Lee老师自学Vue.js的相关知识。在此将自己敲代码中,遇到的一些坑以及最开始琢磨不透的地方,加上一些个人的理解,在此记录一下,与大家分享。也请大家多多指教,能够给我一些帮助性的意见,谢谢。父组件向子组件传值父组件向子组件传值,那么我就需要把父组件里面的东西让子组件中去...
这是我的第一篇blog。作为一个old fashion的后端刚刚准备转前端的一个纯小白,最近一直在跟着慕课网的Dell Lee老师自学Vue.js的相关知识。在此将自己敲代码中,遇到的一些坑以及最开始琢磨不透的地方,加上一些个人的理解,在此记录一下,与大家分享。也请大家多多指教,能够给我一些帮助性的意见,谢谢。
父组件向子组件传值
父组件向子组件传值,那么我就需要把父组件里面的东西让子组件中去接收。那么在这里我们需要用什么方式去传递呢?这个想必大家都知道:通过子组件中的props属性(比如我定义一个属性叫numbers)来接收,然后在父组件中给这个组件去赋值(numbers="1")或者绑定(v-bind :numbers="1")这个属性。(这两种方式的区别是,一个接收的是字符串,另一个接收的是js表达式,在这个里面是数字)。下面我贴我练习的时候写的一个代码,会更加深入去理解一些。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<item :numbers="plus" ></item>
</div>
</body>
<script>
//子组件通过属性(props)传递数据,父组件定义的是什么,子组件就会显示什么
//注意,子组件不能直接改变父组件中的属性值,但是可以复制一份数据到子组件中,然后改变子组件自己的属性值
//@click不能直接定义在子组件的标签中,也就是我这里面写的item,否则它会找不到,因为这个是在子组件里面改变子组件对象的方法。所以只能写在模板之中。
var newchild={
template:"<div @click='AddClick'>{{mynumber}}</div>",
props:['numbers'],
data:function()
{
return {
mynumber:this.numbers
}
},
methods:{
AddClick:function()
{
this.mynumber++;
}
}
}
var vm=new Vue(
{
el:"#app",
//components中子组件一定是个对象,格式为:"父组件(需要调用的地方)的名字:子组件(定义子组件变量)的名字"
components:{
//前面是父组件中,也就是说需要调用的地方的标签名,后面是变量名,也就是子组件的名称。这样的方式才能正确注册
item:newchild
},
data:{
plus:0
}
}
);
</script>
</html>
强调一些比较细节的点吧,在我的代码注释中也有说明:
1.用局部组件的时候一定要注册。注册的时候用的是对象的格式。像我代码贴出来的其实已经比较明确,“标签的值:定义的变量名的值”,用这种格式来进行注册。
2.组件中的data是一个function,Vue中给出的解释是这样的,它希望每一个组件有自己的一个对象,也就是说,每一个对象对应自己的一个子组件。这样保证他们直接是相互独立的。
3.在子组件定义中,props:后面跟的是数组,就是说这个组件中有几个属性(好吧,数组、对象什么的有时候确实傻傻分不清楚。我上面的例子用的是数组,其实也可以用对象。)
4.这里我在子组件中又定义了一个mynumber来保存数据,是因为Vue是单向数据流的,只能父组件给子组件去传值。而子组件不能直接改变父组件的值。假如直接用父组件的值例如这样(我注掉的是正确的,现在是错误用例):
var newchild={
template:"<div @click='AddClick'>{{numbers}}</div>",
props:['numbers'],
// data:function()
// {
// return {
// mynumber:this.numbers
// }
// },
methods:{
AddClick:function()
{
this.numbers++;
}
}
}
直接去改变number的值,直接加,虽然看上去好像没问题。但是观察控制台,会发现有如下警告:
避免直接操作属性值。这是因为属性值中接收的类型可能是object类型的数据,那么这样操作也会更改其他组件中引用该object类型的数据。这样的话,就会对其他组件的功能造成影响。所以之所以copy出来一份数据,然后操作这个copy出来的数据用来显示,正是因为Vue中的这样一个单项数据流的概念。
5.事件也要写在子组件内,而不是写在自定义标签上,在模板中要包含。例如在这里我写的是@click点击事件,写在自定义标签是毫无意义的。
子组件向父组件传值
既然父组件能向子组件传递信息,那么子组件也能够向父组件传递信息,但是传递的机制有所不同。父组件向子组件是通过props属性,然后在自定义标签内给该属性赋值,从而接收。而子组件是需要在响应一个$emit方法,在这里定义一个事件,然后在父组件里面进行监听这个事件,最后进行响应。关于这个方法后面会详细说明。话不多说,还是老样子,贴代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vue.js"></script>
<title>Document</title>
<div id="app" >
<app @delegate="changeMain"></app>
<div>总数:{{total}}</div>
<div>加了{{totalclick}}次</div>
</div>
<script>
var item={
template:"<div @click='changeNumber'>{{number}}</div>",
data:function(){
return {
number:0,
clicktime:0
}
},
methods:{
changeNumber:function()
{
this.number=this.number+2;
this.clicktime=this.clicktime+1;
this.$emit("delegate",this.number,this.clicktime);
}
}
}
var vm=new Vue({
el:"#app",
components:{
app:item
},
data:{
total:0,
totalclick:0
},
methods:{
changeMain:function(number,clicktime)
{
this.total=number;
this.totalclick=clicktime;
}
}
})
</script>
</head>
<body>
</body>
</html>
这是一个简单的点击自增显示的页面。还是像上面一样,列出总结:
1.this.$emit("自定义名称"),这里的名称可以随意取,这里定义的是我要触发的事件。当然在这里面我是在子组件里面用了一个@click来触发点击事件,然后到子组件中的方法。子组件会触发这个自定义事件。
2.触发自定义事件之后,这次要在自定义标签中来监听,设置的方法很简单,用@+自定义事件的名称来监听,例如@delegate="父组件中要执行的方法",在这里我用的是changeMain这个方法。
这里需要总结的不多。因为可以注意到,上面的例子和这个例子,有些共同的地方,他们包含的内容是一致的。所以不再赘述。
$emit方法传参的理解
细心的你们应该可以注意到,上面的例子我传了两个参数。最开始我也不理解,为啥还要带参数,啥玩意啊……(内心mmp),后来发现还是比较好懂的。在这里阐述一下好了。
$emit("要定义的事件",参数1,参数2...)
也就是说,在这里我要触发的事件,是可以带参数的,想传几个就传几个进来。
然后我在后面的接受参数的事件中,可以直接把他们带进来。这个只和emit中,带入的顺序有关,而和名称本身是无关的。例如我下面这么写,它也是按照emit中的顺序来接收参数的。
methods:{
changeMain:function(clicktime,number)
{
this.total=clicktime;
this.totalclick=number;
}
}
结果和上述一致。function的参数列表里面会把emit带进来的参数进行一一对应。然后你在后面中怎么去用,怎么去写,就是自己的事情了,这么说来,应该比较好理解了吧。当然写这个的原因也是为了加深印象和交流。
以上就是我对这两个问题的理解,可能个别地方有偏差,也希望大家指正。谢谢。
更多推荐
所有评论(0)