zoukankan      html  css  js  c++  java
  • Vue 组件与复用

    (1)全局注册

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>Vue</title>
        </head>
    
        <body>
            <div id="app">
                <my-component>
    
                </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', {
                    //DOM结构必须被元素包含
                    template: '<div>组件内容</div>'
                })
                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>
    
                </my-component>
            </div>
            <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
            <script type="text/javascript">
                var Child = {
                    template: '<div>组件内容</div>'
                }
                new Vue({
                    el: "#app",
                    components: {
                        'my-component': Child
                    }
                })
            </script>
        </body>
    
    </html>

    (3)is挂载组件

    table、ul、ol、select这些标签会限制其内的元素,这时可以使用is来挂载组件

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>Vue</title>
        </head>
    
        <body>
            <div id="app">
                <table>
                    <tbody is='my-component'>
                    </tbody>
                </table>
            </div>
            <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
            <script type="text/javascript">
                //示例前注册
                Vue.component('my-component', {
                    //DOM结构必须被元素包含
                    template: '<div>组件内容</div>'
                })
                new Vue({
                    el: "#app"
                })
            </script>
        </body>
    
    </html>

    (4)组件也可以有data,method,computed等属性。但是data是函数,数据需要return出去。

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>Vue</title>
        </head>
    
        <body>
            <div id="app">
                <my-component></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', {
                    //DOM结构必须被元素包含
                    template: '<div>{{message}}</div>',
                    data: function() {
                        return {
                            message: '组件内容'
                        }
                    }
                })
                new Vue({
                    el: "#app"
                })
            </script>
        </body>
    
    </html>

    (5)解决多个组件之间数据共享问题

    给组件返回一个新的data对象

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>Vue</title>
        </head>
    
        <body>
            <div id="app">
                <my-component></my-component>
                <my-component></my-component>
                <my-component></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', {
                    //DOM结构必须被元素包含
                    template: '<button @click="counter++">{{counter}}</button>',
                    data: function() {
                        return {
                            counter: 0
                        }
                    }
                })
                new Vue({
                    el: "#app"
                })
            </script>
        </body>
    
    </html>

     (6)props传递数据、events触发事件和slot内容分发构成Vue组件的3个API来源

  • 相关阅读:
    第221题:最大正方形
    第238题:除自身以外数组的乘积
    简单易懂的拓扑排序
    第207题 课程表
    第198题:打家劫舍
    第四章 初始化与清理
    【笔记】jquery判断两个日期之间相差多少天
    【笔记】spring定时器时间配置实例
    【笔记】jquery加减乘除及科学计算法处理
    string 日期相加和相减
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8056865.html
Copyright © 2011-2022 走看看