markdownpad2 html渲染组件出错_学习 vue 的组件 props 单向数据流的概念【16】

80 阅读 0 评论 53 点赞

我是靠谱客的博主腼腆音响，这篇文章主要介绍markdownpad2 html渲染组件出错_学习 vue 的组件 props 单向数据流的概念【16】，现在分享给大家，希望可以做个参考。

学习要点：1.单向数据流

本节课我们来开始学习 Vue 的组件 props 单向数据流的概念。

一．单向数据流

1. 父组件的 data 值更新后通过 props 选项交给子组件进行渲染，反之则不行；

2. 这就是单向数据流(单向下行绑定)，不能通过子组件来改变父组件的状态；

3. 这样做的是为了防止父组件发生改变后，数据流变得难以理解；

4. 父组件更新时，子组件所有 props 值也会更新，你不能改变子组件的 props 值；

)1. 以上内容，会正确改变了 props 的值，也渲染到视图中，但控制台报错；

)2. 意为：不可以直接修改 props 值，可以通过数据或计算属性来解决；

复制代码

1
const app=new Vue({    el:'#app',    data:dataObj,    components:{        'html-a':{            props:['count'],            data(){                return {                    childrenCount:this.count //通过使用 data 数据更改                }            },            template:`

{{childrenCount}}

@click="childrenCount++">{{childrenCount}}

`, } }});

复制代码

1
//通过使用计算属性和方法数据更改const app=new Vue({    el:'#app',    data:dataObj,    components:{        'html-a':{            props:['count'],            data(){                return {                    scount:this.count                }            },            template:`

@click="childCount">{{changechildCount}}

`, computed: { changechildCount(){ return this.scount; } }, methods: { childCount(){ this.scount++ } }, } }});