官网链接：https://cn.vuejs.org/v2/guide/components-props.html
视频链接：
参考文章链接：http://www.cnblogs.com/keepfool/p/5625583.html
如下代码所示：
父组件向子组件传值
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="vue.min.js"></script>
<body>
<div id="app">
<counter v-bind:count="number"></counter>
</div>
<script>
var counter={
props:['count'],
template:`<div>{{count}}</div>`
}
var vm=new Vue({
el:'#app',
components:{
// counter可以写成counter:counter
counter
},
data:{
number:0
}
})
</script>
</body>
</body>
</html>子组件只能够用父组件传递过来的值，而不能去修改父组件传递过来的值。因为父组件的值可能被多个子组件使用，如果某个子组件修改父组件的值，那么它也会对其它组件的值造成影响。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="vue.min.js"></script>
<body>
<div id="app">
<counter v-bind:count="number"></counter>
</div>
<script>
var counter={
props:['count'],
template:`<div @click="add">{{count}}</div>`,
methods:{
add:function(){
this.count++;
}
}
}
var vm=new Vue({
el:'#app',
components:{
// counter可以写成counter:counter
counter
},
data:{
number:0
}
})
</script>
</body>
</body>
</html>针对这个问题，我们可以在子组件中定义一个data来保存父组件传递过来的值。让其数据能够成为一个独立的部分来供子组件单独使用。正确代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="vue.min.js"></script>
<body>
<div id="app">
<counter v-bind:count="number"></counter>
</div>
<script>
var counter={
props:['count'],
data:function(){
return{
number:this.count
}
},
template:`<div @click="add">{{number}}</div>`,
methods:{
add:function(){
this.number++;
}
}
}
var vm=new Vue({
el:'#app',
components:{
// counter可以写成counter:counter
counter
},
data:{
number:0
}
})
</script>
</body>
</body>
</html>子组件向父组件传值
子组件通过$emit来将值传递给父组件，但是前提是一定要有事件触发。如下代码所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="vue.min.js"></script>
<body>
<div id="app">
<counter v-bind:count="number" @increase="addc"></counter>
<counter v-bind:count="number" @increase="addc"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:['count'],
data:function(){
return {
number:this.count
}
},
template:`<div @click="add">{{number}}</div>`,
methods:{
add:function(){
this.number++;
this.$emit('increase',1);
}
}
}
var vm=new Vue({
el:'#app',
components:{
// counter可以写成counter:counter
counter
},
data:{
number:1,
total:2
},
methods:{
addc:function(value){
this.total+=value;
}
}
})
</script>
</body>
</body>
</html>