打赏

Vue props 单向数据流

1、props通信

注意：DOM模板的驼峰命名props要转为短横分割命名。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <my-component message='来自父组件的数据' warning-text="提示信息"></my-component>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: '<div>{{warningText}}：{{message}}</div>',
                props: ['message', 'warningText']
            })
            new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>

传递动态数据（v-bind）：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="parentMessage" />
            <my-component :message='parentMessage'></my-component>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: '<div>{{message}}</div>',
                props: ['message']
            })
            new Vue({
                el: "#app",
                data: {
                    parentMessage: ''
                }
            })
        </script>
    </body>

</html>

2、单向数据流

（1）子组件保存父组件传递过来的值，在子组件自己的作用域下修改和使用。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">

            <my-component :init-count='1'></my-component>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: '<div>{{initCount}}</div>',
                props: ['initCount'],
                data: function() {
                    return this.initCount
                }
            })
            new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>

（2）使用计算属性

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">

            <my-component :width='100'></my-component>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: '<div :style="style">组件内容</div>',
                props: ['width'],
                computed: {
                    style: function() {
                        return {
                            width: this.width + 'px'
                        }
                    }
                }
            })
            new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>

 

posted @ 2017-12-18 14:54  孟繁贵  阅读(1575)  评论(0)  编辑  收藏  举报
TOP