Vue props 單向數據流

時間 2019-11-13

標籤 vue props 單向數據流简体版

原文原文鏈接

一、props通訊javascript

注意：DOM模板的駝峯命名props要轉爲短橫分割命名。css

<!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）：html

<!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: ''
                }//前端全棧開發交流羣：
            })//866109638
        </script>//幫助1-3年工做人員
    </body>//突破技術瓶頸，提高思惟能力

</html>

二、單向數據流前端

（1）子組件保存父組件傳遞過來的值，在子組件本身的做用域下修改和使用。vue

<!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）使用計算屬性java

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

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>//前端全棧交流學習圈：
//866109386，幫助1-3年前端人員
    <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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。