这是我的第一篇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带进来的参数进行一一对应。然后你在后面中怎么去用，怎么去写，就是自己的事情了，这么说来，应该比较好理解了吧。当然写这个的原因也是为了加深印象和交流。
以上就是我对这两个问题的理解，可能个别地方有偏差，也希望大家指正。谢谢。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
