zoukankan      html  css  js  c++  java
  • Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件

    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <script src="js/vue-2.5.17.js"></script>
    <script type="text/javascript">
        // 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
        // 每个组件组件均拥有模板,template
        var app = new Vue({
            // 根组件的模板就是挂载点
            el: "#app",
            data : {
                msg: "根组件"
            },
            // 根组件可以显式书写模板吗? 可以
            // 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
            // 根组件如果不书写自身模板,那么模板就采用挂载点,如果显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
            template: "<div>显式模板</div>"
        })
        // app.$template
    </script>
    根组件
    <script type="text/javascript">
        // 一个满足vue语法规则的对象就是一个组件
        // 直接来定义这样的组件,用一个变量名来接收,就是创建了一个局部组件,
        // 变量名就是局部组件的组件名
        // 通过组件名就可以使用该组件
    
        // 局部组件要在父组件中使用,一定要提前在父组件中进行注册
    
        // 语法规则
        // 有自身模板template,有data/methods/computed/watch...
        var localTag = {
            template: "<div class='sup'><div class='sub'></div></div>"
        }
    
        var btnTag = {
            // template: "<div><button>按钮1</button><button>按钮2</button></div>"
            template: "<button @click='btnAction'>点击了{{ num }}下</button>",
            // data需要绑定方法,数据通过方法返回值进行处理,达到组件复用时,数据的私有化
            data: function() {
                return {
                    num: 0
                }
            },
            methods: {
                btnAction: function () {
                    this.num++
                }
            }
        }
    
        // 根组件
        new Vue({
            el: "#app",
            // 注册子组件
            components: {
                // 1
                // "localtag": localTag
                // 2
                // "localTag": localTag
                // 3
                // "local-tag": localTag
                // 4
                // localTag: localTag
                // 5 ES6对象语法,key value写法相同,可以省略value
                localTag,
                btnTag,
    
            }
        })
    </script>
    局部组件 (达到html+css+js代码块的复用) data要return,要注册
    <body>
        <div id="app">
            <global-tag v-for="(o, i) in ls" :key="i"></global-tag>
        </div>
    </body>
    <script src="js/vue-2.5.17.js"></script>
    <script type="text/javascript">
        // 全局组件
        // 用Vue.component("组件名", {})来创建全局组件
        // 全局组件附属于Vue实例,可以不需要注册就可以使用
        Vue.component("global-tag", {
            template: "<button @click='btnClick'>{{ n }}</button>",
            data () {
                return {
                    n: 0
                }
            },
            methods: {
                btnClick () {
                    this.n++
                }
            }
        })
    
        new Vue({
            el: "#app",
            data: {
                ls: [0, 0, 0]
            }
        })
    </script>
    全局组件

    二 组件间通信

    <body>
        <div id="app">
            <local-tag :num="num" :sup_data="sup_data"></local-tag>
        </div>
    </body>
    <script src="js/vue-2.5.17.js"></script>
    <script type="text/javascript">
        // 父组件与子组件建立联系的关键点
        // 同绑定属性的方式进行数据传输
        // 1.给在父组件中出现的子组件名定义标签的全局属性
        // 2.全局属性的值赋值为父组件的数据变量
        // 3.在子组件内部,通过props拿到标签中的全局属性名
    
        var localTag = {
            props: ['num', 'sup_data'],
            template: "<div @click='divActive'>{{ num }}</div>",
            methods: {
                divActive () {
                    console.log(this.num);
                    console.log(this.sup_data);
                }
            }
        }
    
        // 数据属于父组件,子组件来接收使用数据
        new Vue({
            el: "#app",
            components: {
                localTag
            },
            data: {
                num: 10,
                sup_data: [1, 2, 3, 4, 5]
            }
        })
    </script>
    父传子
    <div id="app">
        <global-tag @send_data="receive_data"></global-tag>
        {{ n }}
    </div>
    <script type="text/javascript">
    // 1.数据由子级提供
    // 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
    // 3.在父级的模板中,子组件名上,为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
    // 4.在实现体中就可以拿到回调参数
        Vue.component("global-tag", {
        #子绑定事件
            template: "<div @click='divAction'>我是div</div>",
            data () {
                return {
                    num: 10,
                    arrList: [1, 2, 3, 4, 5]
                }
            },
            methods: {
                divAction () {
                    this.$emit("send_data", this.num, this.arrList)
                }
            }
        });
    
        new Vue({
            el: "#app",
            data: {
                n: 0
            },
            methods: {
                receive_data (num, arrList) {
                    console.log("接收到的数据:", num, arrList);
                    this.n = num;
                }
            }
        })
    </script>
    子传父
    <body>
        <div id="app">
            <div>
                <input type="text" v-model="val">
                <button type="button" @click="submitMsg">提交</button>
            </div>
            <ul>
                <!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->
                <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>
            </ul>
        </div>
    </body>
    <script src="js/vue-2.5.17.js"></script>
    <script type="text/javascript">
        Vue.component("todo-list", {
            template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>",
            props: ['v', 'i'],
            methods: {
                delect_action () {
                    this.$emit("delect_action", this.i)
                }
            }
        })
        
    
        new Vue({
            el: "#app",
            data: {
                val: "",
                list: []
            },
            methods: {
                submitMsg () {
                    // 往list中添加input框中的value
                    if (this.val) {
                        this.list.push(this.val);
                        this.val = ""
                    }
                },
                delect_action(index) {
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
    案例组件化
  • 相关阅读:
    Android源码剖析之Framework层进阶版(Wms窗口管理)
    如何让项目中的代码更易于维护
    Android源码剖析之Framework层实战版(Ams管理Activity启动)
    node.js学习路线图
    让你的公众号拥有AI能力--微信对话开放平台
    Android跨平台投屏软件(无需root)--scrcpy
    微信H5支付申请相关问题
    Bmob后端云实现无后端开发APP
    微信公众号申请相关问题
    iOS企业包下载安装
  • 原文地址:https://www.cnblogs.com/3sss-ss-s/p/9910195.html
Copyright © 2011-2022 走看看