JS-Vue-组件

最新推荐文章于 2024-05-27 23:45:24 发布

Hello World️

最新推荐文章于 2024-05-27 23:45:24 发布

阅读量266

点赞数

分类专栏：前端学习文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_51318597/article/details/126488071

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

获取DOM元素

<body>
    <div id="box">
        <h1 ref='h' id="myh">1111</h1>
        <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>

定义全局组件

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

定义局部组件

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

组件的嵌套

<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: `
                	<div>
                    	<h1>子子组件</h1>
    				</div>`,
                data: function () {
                    return {
                        text: '我是组件的数据',
                        count: 0
                    }
                },
                //组件的函数
                methods: {
                    show() {
                        //alert("组件的函数")
                        this.count++;
                    }
                }
            }
        }
    }

    //根组件
    new Vue({
        el: '#box',
        data: {
            msg: 'Hello'
        },
        //定义局部组件
        components: {
            'my-top': myTop
        }
    })
</script>

父组件给子组件传递数据

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

子组件给父组件传递数据

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