Vue组件，父组件与子组件交互

最新推荐文章于 2024-09-13 17:30:19 发布

_曹家三少

最新推荐文章于 2024-09-13 17:30:19 发布

阅读量236

点赞数

分类专栏： Vue 文章标签： vue java

本文链接：https://blog.csdn.net/wengeaiyuanyuan/article/details/106682533

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

Vue组件

Vue组件

详细文档：https://cn.vuejs.org/v2/guide/components-registration.html

简介

组件：可以将模块进行一个拆分，不同的组件负责不同的功能模块
模块化：模块化是从代码角度去分析，方便分层开发，保证每个模块职责单一
组件化：组件化是从界面的角度去划分，如分页组件，轮播组件
组件中也可以有自己的data，methods。组件的存在是为了复用，定义一个组件后，可能会有多个地方使用到该组件
如果按照data:{}的写法，多个组件会复用同一个data，降低组件的复用性，而定义为function则不会

使用组件

使用Vue.extend来使用组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="bin/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>


</body>
<script>
        // 1 使用Vue.extend来组件组件
        // 按照java的开发思想，变量名往往是驼峰规则。
        // vue定义组件时可以使用驼峰规则，但是，使用组件时如果存在驼峰，
        // 应当全部改为小写，并将每个单词用 - 连接
    Vue.component('myComponent', Vue.extend({
        // template就是组件要展示的内容，可以是html标签
        //必须要一个根节点
        template: "<h3>我是组件</h3>"
    }))

    new Vue({
        el: "#app"
    })
</script>
</html>

不使用extend组件的组件

<body>
    <div id="app">
        <my-component></my-component>
    </div>

   

    <script>
        Vue.component('myComponent', {
            // template就是组件要展示的内容，可以是html标签
            template: "<h3>不使用extend组件的组件</h3>"
        })

        var vue = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>

使用全局注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="bin/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>

<template id="s1">
    <h3>全局组件</h3>
</template>
</body>

<script>
    Vue.component('myComponent', {
        template: "#s1"
    })

    new Vue({
        el: "#app"
    })
</script>

</html>

组件中的data（）与methods（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="bin/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>

<template id="s1">
    <div>
        count={{count}}
        <button @click="add">加</button>
    </div>
</template>
</body>

<script>
    Vue.component('myComponent', {
        template: "#s1",
        data(){
            return{
                count:0
            }
        },

        methods:{
            add(){
                this.count++;
            }
        }
    })

    new Vue({
        el: "#app"
    })
</script>

</html>

私有组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>私有组件</title>
    <script src="bin/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>

<template id="s1">
    <div>
        私有组件
    </div>
</template>
</body>

<script>

    new Vue({
        el: "#app",

        components:{
            //电仪私有组件的方式：
            //组件名称建议用引号包起来，如果不包起来，在严格语法情况下会报警告
            //使用时需要改成-，而方法、变量中是不允许有横线的
            'myComponent':{
                template:"#s1",
            }
        }
    })
</script>

</html>

组件的切换

需求：
当点击登录按钮，则显示登录界面
当点击注册按钮，则显示注册界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件切换</title>
    <script src="bin/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <button @click="change">切换</button>
    <login-component v-if="flag"></login-component>
    <register-component v-else></register-component>
</div>

<template id="s1">
    <div>
        登录组件
    </div>
</template>

<template id="s2">
    <div>
        注册组件
    </div>
</template>

</body>

<script>

    new Vue({
        el: "#app",

        data:{
          flag:true
        },

        methods:{
            change(){
                this.flag=!this.flag;
            }
        },

        components:{
            //电仪私有组件的方式：
            //组件名称建议用引号包起来，如果不包起来，在严格语法情况下会报警告
            //使用时需要改成-，而方法、变量中是不允许有横线的
            'loginComponent':{
                template:"#s1",
            },

            'registerComponent':{
                template:"#s2",
            }
        }
    })
</script>

</html>

父组件向子组件传递值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传递值</title>
    <script src="bin/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    {{msg1}}
    <my-component :msg1="msg1"></my-component>
</div>

<template id="temp">
    <div>
        {{msg1}}
        <button @click="change">修改</button>
    </div>
</template>


</body>

<script>
    new Vue({
        el: "#app",
        data: {
            msg1:"我是父组件的值"
        },
        methods: {


        },
        components: {
            'myComponent': {
                template: "#temp",
                data() {
                    return {
                        msg1: "子组件的值"
                    }
                },
                methods:{
                    change(){
                        this.msg1="我是子组件修改的值"
                    }
                },
                props:{
                    msg1:{
                        type:String,
                        default:null
                    }
                }
            }
        }
    })

</script>

</html>

父组件向子组件传递方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传递方法</title>
    <script src="bin/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    {{title}}----{{msg}}
    <my-component @click="changeParent"></my-component>
</div>

<template id="temp">
    <div>
        <button @click="changeSon">切换</button>
    </div>
</template>


</body>

<script>
    new Vue({
        el: "#app",
        data: {
            title: "我是父组件的标题",
            msg: "我是父组件的内容"
        },
        methods: {
            changeParent(title, msg) {
                this.title = title;
                this.msg = msg;
            }

        },
        components: {
            'myComponent': {
                template: "#temp",
                data() {
                    return {}
                },
                methods: {
                    changeSon() {
                        //点击按钮会调用子组件的点击事件的方法，
                        //然后在子组件点击方法中调用父组件的方法
                        //第一个参数为：点击事件，也可以是其他{change，blur等}，后面两个是参数
                        this.$emit('click', '我是子组件标题', '我是子组件内容');
                    }
                }
            }
        }
    })

</script>

</html>

父组件调用子组件的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件调用子组件的方法</title>
    <script src="bin/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <button @click="handleAdd">按钮</button>
    <my-component ref="son"></my-component>
</div>

<template id="temp">
    <div>

    </div>
</template>


</body>

<script>
    new Vue({
        el: "#app",
        data: {},
        methods: {
            handleAdd(){
                // 父组件调用子组件方法。，直接使用ref去调用方法。方法的用法和子组件中一模一样
                this.$refs.son.add();
            }
        },
        components: {
            'myComponent': {
                template: "#temp",
                methods: {
                    add(){
                        alert("123");
                    }
                }
            },
        }
    })

</script>

</html>