zoukankan      html  css  js  c++  java
  • 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 {
                                 this.width + 'px'
                            }
                        }
                    }
                })
                new Vue({
                    el: "#app"
                })
            </script>
        </body>
    
    </html>
  • 相关阅读:
    Python-http请求
    MacOs Big Sur 11.0.1 安装python报错
    linux 根据时间删除某个目录下的文件
    记一次文件上传遇到的坑(文件名|文件格式乱码)
    json_schema参数校验
    K8s
    python实时视频流播放
    pycharm永久激活
    客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法
    webstorm修改文件,webpack-dev-server及roadhog不会自动编译刷新
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8057613.html
Copyright © 2011-2022 走看看