vue组件

作者: rainbowz | 来源:发表于2019-02-04 13:54 被阅读22次

    以上组件注册的方式有些繁琐,Vue.js为了简化这个过程,提供了注册语法糖
    在选项对象的components属性中实现局部注册:

    <div id="app2">
        <my-demo></my-demo>
        <my-demo2></my-demo2>
    </div>
    <script>
    var vm=new Vue({
                el:'#app2',
                components:{
                    //局部注册 my-demo是标签名称
                    'my-demo':{
                        template:'<h1>嘤嘤嘤!</h1>'
                    },
                    //局部注册,my-demo2是标签名称
                    'my-demo2':{
                        template:'<h1>keep learning!</h1>'
                    }
                }
            })
    </script>
    
    图片.png

    使用script或template标签

    <div id="app">
                <demo></demo>
            </div>
        <template id="my-demo">
            <div>上善若水</div>
        </template>
    
    
    <script>
            Vue.component('demo',{
                template:'#my-demo'
            })
            new Vue({
                el:'#app'
            })
    </script>
    
    图片.png

    这使得HTML代码和JavaScript代码是分离的,便于阅读和维护。

    使用props

    <div id="app">
                <my-demo v-bind:name="name" v-bind:age="age"></my-demo>
            </div>
            <template id="myDemo">
        <table>
            <tr>
                <th colspan="2">
                    子组件数据
                </th>
            </tr>
            <tr>
                <td>my name</td>
                <td>{{ name }}</td>
            </tr>
            <tr>
                <td>my age</td>
                <td>{{ age }}</td>
            </tr>
        </table>
    </template>
    <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    name:'kobe',
                    age:27
                },
                components:{
                    'my-demo':{
                        template:'#myDemo',
                        props:['name','age']
                    }
                }
            })
        </script>
    
    图片.png

    我们想使用父组件的数据 必须在子组件中定义props属性也就是props: ['myName', 'myAge']这行代码


    图片.png

    prop默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态
    在父组件中使用子组件时,通过以下语法将数据传递给子组件:

    <child-component v-bind:子组件prop="父组件数据属性"></child-component>

    单项绑定

    <div id="app">
    
        <table>
            <tr>
                <th colspan="3">父组件数据</td>
            </tr>
            <tr>
                <td>name</td>
                <td>{{ name }}</td>
                <td><input type="text" v-model="name" /></td>
            </tr>
            <tr>
                <td>age</td>
                <td>{{ age }}</td>
                <td><input type="text" v-model="age" /></td>
            </tr>
        </table>
    
        <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
    </div>
    
    <template id="myComponent">
        <table>
            <tr>
                <th colspan="3">子组件数据</td>
            </tr>
            <tr>
                <td>my name</td>
                <td>{{ myName }}</td>
                <td><input type="text" v-model="myName" /></td>
            </tr>
            <tr>
                <td>my age</td>
                <td>{{ myAge }}</td>
                <td><input type="text" v-model="myAge" /></td>
            </tr>
        </table>
    </template>
    

    双向绑定

    可以使用.sync显式地指定双向绑定,这使得子组件的数据修改会回传给父组件。

    <my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>

    单次绑定

    可以使用.once显式地指定单次绑定,单次绑定在建立之后不会同步之后的变化,这意味着即使父组件修改了数据,也不会传导给子组件。

    <my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>

    http://www.cnblogs.com/keepfool/p/5625583.html

    相关文章

      网友评论

        本文标题:vue组件

        本文链接:https://www.haomeiwen.com/subject/jjypsqtx.html