组件基础

作者: 北街九条狗 | 来源:发表于2019-07-02 18:07 被阅读0次

Angular组件篇
组件化流程
DataPicker
vue命名规范
应用程序UI编程
Flutter - UI基础
组件化
组件化之路—集成组件SDK
远程私有库设计优化
两篇文章搞定ReactNative之搞定ReactNative

组件的入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- 使用组件 -->
        <login-com></login-com>
        <register-com></register-com>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        // 全局组件声明有三种方式，这里只讲一种
        Vue.component('login-com', {
            template : `<div><h1>这是我们的 login 组件</h1></div>`, // html模板内容
        })

        Vue.component('register-com', {
            template : `<div><h1>这是我们的 register 组件</h1></div>`, // html模板内容
        })

        var vm = new Vue({
            el : "#app", 
            data : {},
        })
    </script>

</body>
</html>

组件的私有化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn> -->

        <mybtn></mybtn>
        
    </div>

    <script src="./js/vue.js"></script>
    <script>
        // my-btn 命名 通常为 xx-xxx 一般不要起myBtn这种组件名，如果一定要使用，使用组建时也必须是<my-btn></my-btn>
        Vue.component('my-btn', {
            template : `<button @click="num++">您已经点击我 {{num}} 次了</button>`,
            data() { // data是一个函数，才能复用
                return {
                    num : 0
                }
            },
        });

        // 声明一个组件对象
        var mybtn = {
            template : `<button @click="num++">您已经点击我 {{num}} 次了</button>`,
            data() { // data是一个函数，才能复用
                return {
                    num : 10
                }
            },
        }

        var vm = new Vue({
            el : "#app", 
            data : {},
            components : { // 注册局部组件
                mybtn, // 等同于 'mybtn' : mybtn
            }
        })
    </script>
</body>
</html>

组件的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <input type="button" value="toggle" @click="onOff=!onOff">
        <login-com v-if="onOff"></login-com>
        <register-com v-else></register-com>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.component('login-com', {
            template : `<h1>这是 login 组件</h1>`
        })

        Vue.component('register-com', {
            template : `<h1>这是 register 组件</h1>`
        })

        var vm = new Vue({
            el : "#app", 
            data : {
                onOff : true
            },
        })
    </script>
</body>
</html>

组件间的传值-向组件内传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <login :title="msg" :abc="msg"></login>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.component('login', {
            template : `<h1> 这是 login 组件 -- {{num}} -- {{title}} -- {{abc}} </h1>`,
            data() {
                return {
                    num: 123
                }
            },
            props : ['title','abc']
        })

        var vm = new Vue({
            el : "#app", 
            data : {
                msg : '标题信息22222'
            },
        })
    </script>

</body>
</html>

组件间传值-向组件外传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <son @func="show"></son>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.component('son', {
            template : `<button @click="sendMsg">发送数据</button>`,
            data() {
                return {
                    num : 1234
                }
            },
            methods :{
                sendMsg(){
                    // console.log('son : ' + num);
                    // $emit 触发组件上的事件
                    this.$emit('func',this.num);// 第一个参数是需要触发当前组件身上的函数，第二个参数要发送的数据
                }
            }
        })

        var vm = new Vue({
            el : "#app", 
            data : {},
            methods: {
                show(num){
                    console.log('app : ' + num);
                }
            },
        })
    </script>

</body>
</html>

ref获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <button @click="getMsg">获取元素内容</button>
        <h1 ref="myh1">这是一个<span>大标题</span></h1>
        <login ref="mylogin"></login>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.component('login',{
            template : `<h1> 这是 login 组件 </h1>`,
            data() {
                return {
                    name : '张三'
                }
            },
        })

        var vm = new Vue({
            el : "#app", 
            data : {},
            methods: {
                getMsg(){
                    console.log("innerHTML : "+this.$refs.myh1.innerHTML);
                    console.log("innerText : "+this.$refs.myh1.innerText);

                    console.log(this.$refs.mylogin.name);
                }
            },
        })
    </script>

</body>
</html>