您的位置：首页 > Web前端 > Vue.js

【Vue】零基础学习Vue: 第23课 Vue 单向数据流父组件的属性值子组件如何更改：

2019-07-01 10:17 731 查看

单向数据流原理：

子组件不能直接修改父组件中传递的数据
如需间接改变父组件传递的数据 （解决方法：可以在子组件data选项中存储父组件传递的数据之后修改子组件中的数据 即可）

以下是实现代码：

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件改变父组件参数</title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
<!--引入子组件 父组件 向 自组件传msg，a值 -->
<son :msg="msg" :a="a"></son>
</div>

<!-- 子组件son -->
<template id="son">
<div>
<div>我是子组件，父组件传递的数据msg是{{msg}}</div>
<div @click="change">我是子组件，点击我更改父组件传递的a值{{b}}</div>
</div>
</template>

<script>

let son = {
template:'#son',
props:['msg','a'],
//定义子主件的变量
data(){
return {
b:this.a    //存储父组件传递的数据
}
},
//子主件方法
methods:{
change(){
console.log('函数执行')
this.b++  //修改子组件中的数据
}
}
}

let vm = new Vue({
el:'#app',  //父组件
//父组件的数据
data:{
msg:2,
a:1
},
//注册子组件
components:{
son
}
})
</script>
</body>
</html>

运行结果如下：

我是子组件，父组件传递的数据msg是2
我是子组件，点击我更改父组件传递的a值1

自己动手试一下吧！
代码是完整的哦！把代码复制自己创建一个html文件粘贴就行啦！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航