导读 ：
Vue中：
1.父组件向子组件传值：通过给子组件传递属性，子组件通过props接收父组件的值再加以使用。
2.子组件向父组件传值：通过this.$emit([自定义方法名],[传递的参数1],……)执行自定义方法来传值给父组件，父组件在方法中接收。
例子：
- 这是一个通过父子组件传值来求和的一个例子，每个子组件点击都会加2，父组件计算2个子组件和。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!--父组件传值给子组件通过在子组件中定义属性如下(:count="0")-->
<!--子组件传值给父组件通过执行自定义方法-->
<counter :count="0" @inc='clickChange'></counter>
<counter :count="1" @inc='clickChange'></counter>
<div>{{total}}</div>
</div>
<script>
// 通过父组件传值给子组件，如果子组件要改变值则会产生警告，故采用复制父组件值的方法
var counter = {
props: ['count'],
data: function() {
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function() {
// console.log(this.number);
this.number = this.number + 2;
// 给父组件传值
this.$emit('inc', 2);
}
}
};
// 父组件通过属性向子组件传值，
var vm = new Vue({
el: '#root',
components: {
counter: counter
},
data: {
total: 1
},
methods: {
// 要定义形参来表示接收的值
clickChange: function(step) {
this.total += step;
}
}
})
</script>
</body>
</html>
总结 ：
- 实际Vue实例也是个组件，我们一般称它为根组件，若定义局部组件则需要在根组件中声明，如果是全局组件则不需。
- 子组件通过父组件传值的方式拿到的值不可直接进行变更，否则报错（实际是警告）。结局办法：子组件中复制父组件的值再使用子组件的值即可。
网友评论