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

最新推荐文章于 2023-05-19 17:21:18 发布

区块链（Web3）开发工程师

最新推荐文章于 2023-05-19 17:21:18 发布

阅读量232

点赞数

分类专栏：前端零基础学习Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_28505809/article/details/94381372

版权

前端同时被 2 个专栏收录

37 篇文章 5 订阅

订阅专栏

零基础学习Vue

27 篇文章 2 订阅

订阅专栏

单向数据流原理：

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

以下是实现代码：

<!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>