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来源

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 师座操作系统
    Java实现 蓝桥杯VIP 算法提高 师座操作系统
    Java实现 蓝桥杯VIP 算法提高 师座操作系统
    Qt_5_3_MSVC2012-编译QFtp-qt5编译QFtp
    存储入门 – RAID技术(大图解释)
    为什么要关闭360云盘:新来的美工嫌我们logo太丑,所以就决定关闭了。这个理由怎么样
    360云盘服务端前来回答
    SMB2 Protocol – 简介(应用层协议主要用于在计算机间共享文件、打印机、串口等)
    MVC 5
    集合
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8056865.html
Copyright © 2011-2022 走看看