7.2.2单向数据流

作者: 咸鱼前端 | 来源:发表于2019-03-02 13:49 被阅读0次

7.2.2单向数据流
Vue 中的双向数据绑定
常见vue面试题
单向数据流的应用与特性
双向数据绑定和单向数据流区别
前端三大框架：数据绑定与数据流
vuex简单讲解
单向数据流动的函数式 View Controller
浅析前端单向数据流
VUE面试题补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.2.2单向数据流</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!-- 1.父组件传递初始化值进来，子组件将它作为初始值保存起来 -->
        <my-component :init-count='1'></my-component>
        <!-- 2.props作为需要被转变的原始值传入，这种情况用计算属性。 -->
        <my-component :width='100'></my-component>
        <!-- 因为用CSS传递宽度要带单位（px），但是每次都写太麻烦，而且数值计算一般是不带单位的，所以就统一在组件内使用计算属性就可以了 -->
    </div>
    <script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        /*1.初始值保存*/
        Vue.component('my-component',{
            props: ['initCount'],
            template: '<div>{{ count }}</div>',
            data: function () {
                return {
                    count: this.initCount
                }
            }
        });

        /*2.初始值转变*/
        Vue.component('my-component',{
            props: ['width'],
            template: '<div :style="style">组件内容</div>',
            computed: {
                style: function () {
                    return {
                        width: this.width+'px'
                    }
                }
            }
        });
        var vm = new Vue({
            el: "#app",
            data: {
                parentMessage: "输入框初始值"
            }
        })
    </script>
</body>
</html>