JS-Vue-组件

文章目录

获取DOM元素

<body>
    <div id="box">
        <h1 ref='h' id="myh">1111h1>
        <button id="btn" @click="show($event)">按钮button>
    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello'
        },
        methods: {
            show(e) {
                //按钮名称
                //e.target.innerText = "abc";
                //改变DOM元素数据
                //document.getElementById('myh').innerText = 'aaa';

                var v = this.$refs.h;
                v.innerText = "bbbbbbbbbbbbbbbbbbbbbb";
            }

        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

定义全局组件

<body>
    
    <template id="top">
        <div style="height:100px;background:red;margin-top:10px">
            <h1>我的顶部组件-{{text}}h1>
            <button @click="show()">一个按钮{{count}}button>
            <button>一个按钮button>
        div>
    template>

    <div id="box">
        
        <my-top>my-top>
    div>
body>

<script type="text/javascript">
    /*
        * 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
        * 例如 data、computed、watch、methods
        * 以及生命周期钩子等。
        * 仅有的例外是像 el 这样根实例特有的选项。
	*/

    //定义全局组件,组件是可复用的 Vue 实例，
    Vue.component('my-top', {
        //组件的模板,咱们使用ES6的字符串，html标签就可以换行
        //注意的组件模板，只有一个根元素 (每个组件必须只有一个根元素）
        template: "#top",
        //组件的数据,必须是一个函数,取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的
        data: function() {
            return {
                text: '我是组件的数据',
                count: 0
            }
        },
        //组件的函数
        methods: {
            show() {
                //alert("组件的函数")
                this.count++;
            }
        },
        mounted: function() {
            //alert("组件的生命周期函数")
        }
    });

    //看做，根组件
    new Vue({
        el: '#box',
        data: {
            msg: 'Hello'
        },
        methods: {}
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

定义局部组件

<body>
    	
    <template id="left">
        <div style="height:300px;width:200px;background:greenyellow;margin-top:10px">
            <h1>我的左边的组件-{{ text }}h1>
            <button @click="show()">一个按钮{{ count }}button>
        div>
    template>

    <div id="box">
        
        <my-left>my-left>
    div>

body>
<script type="text/javascript">
    var myLeft = {
        template: '#left',
        data: function() {
            return {
                text: '我是组件的数据',
                count: 0
            }
        },
        //组件的函数
        methods: {
            show() {
                //alert("组件的函数")
                this.count++;
            }
        }
    }

    //根组件
    new Vue({
        el: '#box',
        data: {
            msg: 'Hello'
        },
        //定义局部组件
        components: {
            'my-left': myLeft
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

组件的嵌套

<body>
    
    <template id="top">
        <div style="height:100px;background:red;margin-top:10px">
            <h1>我的顶部组件-{{text}}h1>
            <button @click="show()">一个按钮{{count}}button>
            
            <son-son>son-son>
        div>
    template>

    <div id="box">
        
        <my-top>my-top>
    div>

body>
<script type="text/javascript">
    var myTop = {
        template: "#top",
        data: function () {
            return {
                text: '我是组件的数据',
                count: 0
            }
        },
        //组件的函数
        methods: {
            show() {
                //alert("组件的函数")
                this.count++;
            }
        },
        //定义子组件
        components: {
            'son-son': {
                template: `
                	
                    	子子组件
    				`,
                data: function () {
                    return {
                        text: '我是组件的数据',
                        count: 0
                    }
                },
                //组件的函数
                methods: {
                    show() {
                        //alert("组件的函数")
                        this.count++;
                    }
                }
            }
        }
    }

    //根组件
    new Vue({
        el: '#box',
        data: {
            msg: 'Hello'
        },
        //定义局部组件
        components: {
            'my-top': myTop
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

父组件给子组件传递数据

<body>
    
    <template id="son">
        <div>
            <h1>
                子组件{{sonmsg}}---{{hehe}}---{{haha}}
            h1>
            <h2>{{num}}h2>
            <h2>{{arr[0]}}h2>
            <h2>{{flag}}h2>
            <h2>{{obj.username}}h2>
        div>
    template>

    
    <div id="box">
        
        <my-son :haha="msg" :num="num" :arr="arr" :flag="flag" :obj="obj">my-son>
    div>
body>

<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
            msg: 'Hello',
            num: 100,
            arr: [20, 50, 80],
            flag: true,
            obj: {
                "username": "张三"
            }
        },
        //定义局部组件
        components: {
            'my-son': {
                template: '#son',
                //接收父组件传递过来的数据
                props: ['hehe', 'haha', 'num', 'arr', 'flag', 'obj'],
                //组件的数据是个函数
                data: function() {
                    return {
                        sonmsg: '子组件的数据'
                    }
                }
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

子组件给父组件传递数据

<body>
    <template id="son">
        <div>
            <h1>我是子组件{{sonmsg}}h1>
            <button @click="sendData()">把子组件的数据传递给父组件button>
        div>
    template>

    <div id="box">
        {{msg}}
        
        <son @send-data="jieShouData" @send-username="jieShouName" @send-object="jieShouObj">son>

        
        <son @send-data="jieShouData($event)" @send-username="jieShouName($event)"
             @send-object="jieShouObj($event)">son>
    div>
body>
<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
            msg: 'Hello'
        },
        //父组件定义函数的地方
        methods: {
            jieShouData(value) {
                alert("父组件收到：" + value);
            },
            jieShouName(v) {
                alert("父组件收到：" + v);
            },
            jieShouObj(obj) {
                alert(obj.username + "===" + obj.num);
            }
        },
        //定义局部组件
        components: {
            'son': {
                template: '#son',
                data: function() {
                    return {
                        sonmsg: '我是子组件的数据',
                        num: 100,
                        username: '王五'
                    }
                },
                //子组件定义函数的地方
                methods: {
                    sendData() {
                        //this 代表子组件vue对象
                        //触发自定义事件send-data。
                        this.$emit('send-data', this.num)
                        this.$emit('send-username', this.username);

                        //如果有多个零碎的参数，一次只能传递一个，如果要一次传，可以封装成对象，往过传
                        var json = {
                            "num": this.num,
                            "username": this.username
                        }
                        this.$emit('send-object', json);
                    }
                }
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

相关阅读:
python协程详细解释以及例子
 JS-内置对象API-Array(数组)-(二)不改变原数组的API-篇
 如何比较分子的极性？
业主方怎么管理固定资产
 jenkins编译H5做的android端编译卫士app记录
 基于单片机停车场环境监测系统仿真设计
 设计模式浅析(八) ·外观模式
 mybatis -- 打印完整sql(带参数)
我梦想中的学习组织-勤学会
 一文带你了解【抽象类和接口】
原文地址：https://blog.csdn.net/m0_51318597/article/details/126488071