Vue父子组件传值问题

Question

问题

父组件向子组件传值，子组件接收到改传值，给该值写点击事件时为何报错

点击changeTitle事件时事件时运行了，不过报错是为何呢

相关代码

APP.vue

<template>
    <div id="app">
        <index v-bind:list='list' v-bind:Title="Title"></index>
        <other  v-bind:Title="Title"></other>
        <footer class="footer display-flex">
            <a href="javacript:void(0);" class="box-flex" v-for="(footer,index) in Footers" :key="footer.id" 
            :class="{active:index == num}" @click="nav(index)">{{footer}}</a>
        </footer>
    </div>
</template>

<script>
    import index from './components/index'
    import other from './components/other'
    export default {
        name: 'App',
        data() {
            return {
                Footers: ['首页', '订单', '购物车', '个人中心'],
                isTrue: false,
                num:0,
                Title:'这是APP.vue传递过来的一个标题',
                list: [{
                        image: '/static/image/nav-icon (1).png',
                        name: '全部'
                    },
                    {
                        image: '/static/image/nav-icon (2).png',
                        name: '全部'
                    },
                    {
                        image: '/static/image/nav-icon (3).png',
                        name: '全部'
                    }
                    ,
                    {
                        image: '/static/image/nav-icon (4).png',
                        name: '全部'
                    }
                    ,
                    {
                        image: '/static/image/nav-icon (5).png',
                        name: '全部'
                    }
                ]
            }
        },
        methods: {
            nav(index) {
                this.num=index
            }
        },
        components: {
            index,
            other
        }
    }
</script>

index.vue

<template>
    <div class="index">
        <h1 >{{title1}}</h1>
        <p @click="changeTitle">{{Title}}</p>
        <img src="../assets/image/banner (1).jpg" />
        <ul class="list">
            <li class="list-item" v-for="item in list" :key="item.id">
                <span class="item-icon">
                    <img v-bind:src="item.image"/>
                </span>
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        name: 'index',
        //        props:['list'],
        props: {
            list: {
                type: Array,
                required: true
            },
            Title:{
                type:String
            }
        },
        data() {
            return {
                title1: '首页',

            }

        },
        methods: {
            changeTitle:function () {
                this.Title='标题改变了'
            }
        },
    }
</script>

other.vue

<template>
    <div class="other">
        <p>这是一些其他内容</p>
        <h2>{{Title}}</h2>
    </div>
</template>

<script>
    export default {
        name:'other',
        props: {
            Title: {
                type: String, 
            },
        },
        data() {
            return {
               
            }
        },
    }
</script>

Answer 1

子组件不要进行修改props数据。因为props是父组件传下来的，你在子组件改了，之后如果父组件的这个值也变了，那这个属性要取父组件改后的值，还是取子组件自己改的值。推荐做法：把props值保存到data里

export default {
        name: 'index',
        props: {          
            Title:{
                type:String
            }
        },
        data() {
            return {
                myTitle:this.Title
            }
        },
        methods: {
            changeTitle:function () {
                this.myTitle='标题改变了'
            }
        },
    }
</script>

Answer 2

在Vue2中组件的props的数据流动改为了只能单向流动，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。
也就是说你不能 直接修改 props里面的数值需要

changeTitle() {
    this.$emit('changeTitle', title的value)
}

然后在父亲组件中改变 title
然后在子组件才会发生改变

Answer 3

子组件不能直接修改由父组件传过来的prop值。
解决方法有二：

1. 单项数据流
2. 父子组件事件通信

Answer 4

报这个错应该是你不能直接更改父传给子组件的值title,如果要改变这个值，要通过事件传递，传给父，父来改变title,然后子组件跟着改变，保持数据的单向流。
https://vuefe.cn/v2/guide/com...