vue当中有个单向数据流的概念，也就是：父组件可以向子组件传递/修改参数(通过属性的方式传)，但子组件不可以反过来修改父组件传递过来的参数！（因为怕子组件改了父组件引用类型的数据，可能会影响到其他组件）。那怎样解决这个问题？可以复制给子组件自己的变量，然后子组件修改自己的变量啊！
这是父组件向子组件传递数据：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
//加了:后引号里的内容就不是字符串了，而是js表达式，所以，就是数字类型了 <br>
<counter :count="1"></counter>
<counter :count="2"></counter>
</div>
<script type="text/javascript">
//父组件是通过属性的方式向子组件传递数据的
//局部组件，需要注册
var counter = {
props: ["count"], //子组件接收父组件传过来的内容
data: function() {
return {
number: this.count //从父组件接收count数据，复制到子组件自己data的变量number里
}
},
/*template: "<div @click=‘handleClick‘>{{count}}</div>",*/
//既然子组件不应该修改父组件传过来的值，那就修改自己的咯
template: "<div @click=‘handleClick‘>{{number}}</div>",
methods: {
handleClick: function() {
/*//这种方式虽然可以实现，但会警告：不要直接修改父组件传递过来的属性!
this.count++ */
//所以给子组件自己的number++，而不是父组件的count++
this.number++
}
}
}
var vm = new Vue({
el: "#root",
components: {
counter: counter
}
})
</script>
</body>
</html>子组件向父组件传递数据：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
//加了:后引号里的内容就不是字符串了，而是js表达式，所以，就是数字类型了 <br>
//这个模版属于根组件，所以handleInc方法也要写在根组件 <br>
<counter :count="3" @change="handleInc"></counter>
<counter :count="2" @change="handleInc"></counter>
<div>{{total}}</div>
</div>
<script type="text/javascript">
//父组件是通过属性的方式向子组件传递数据的
//局部组件，需要注册
var counter = {
props: ["count"],
data: function() {
return {
number: this.count
}
},
//既然子组件不应该修改父组件传过来的值，那就修改自己的咯
template: "<div @click=‘handleClick‘>{{number}}</div>",
methods: {
handleClick: function() {
this.number++
//点击子组件，触发change事件，告诉父组件，自己增加了1（可以自己命名事件，不一定要是change）
this.$emit("change", 1)
}
}
}
var vm = new Vue({
el: "#root",
components: {
counter: counter
},
data: {
total: 5
},
methods: {
//接收到子组件中的参数step(这里是this.$emit("change", 1)中的1)，参数可以随意命名的，不一定要叫step
handleInc: function(step) {
this.total += step
}
}
})
</script>
</body>
</html>原文地址：https://blog.51cto.com/5660061/2419379
时间： 2024-09-28 16:34:18