Vue基础系列：组件及父子组件通信

最新推荐文章于 2022-03-17 11:29:42 发布

天然玩家

最新推荐文章于 2022-03-17 11:29:42 发布

阅读量138

点赞数 1

分类专栏： # Vue ABC 文章标签： Vue 组件

本文链接：https://blog.csdn.net/Xin_101/article/details/114226857

版权

Vue ABC 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1 组件

组件即封装的功能。

1.0 局部组件

局部组件使用Vue.extend(“component-name”, object)定义，或者直接使用var定义，需要在Vue对象中注册使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        // 局部组件
        var MyHeader = {
            template:`
            <div>
                <h1>组件Components</h1>
            </div>
            `
        }
        var MyBody = {
            template:`
            <div>
                <div>One</div>
                <div>Two</div>
            </div>
            `
        }
        new Vue({
            
            el: "#app",
            components: {
                MyHeader,
                MyBody
            },
            template:`
                <div>
                    <my-header></my-header>
                    <my-body></my-body>
                </div>
            `,
            data:function() {
                return {
                    variableName:"我是变量值"
                }
            },
            methods:{
                methodName: function() {
                }
            },
            
        })
    </script>
</body>
</html>

1.2 全局组件

全局组件使用Vue.component(“component-name”, object)定义，无需注册，全局使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        // 全局组件
        Vue.component("MyFooter", {
            template: `
            <div>
                <div>---------------</div>
            </div>
            `
        })
        // 局部组件
        var MyHeader = {
            template:`
            <div>
                <h1>组件Components</h1>
            </div>
            `
        }
        var MyBody = {
            template:`
            <div>
                <div>One</div>
                <div>Two</div>
            </div>
            `
        }
        new Vue({
            
            el: "#app",
            components: {
                MyHeader,
                MyBody
            },
            template:`
                <div>
                    <my-header></my-header>
                    <my-body></my-body>
                    <my-footer></my-footer>
                </div>
            `,
            data:function() {
                return {
                    variableName:"我是变量值"
                }
            },
            methods:{
                methodName: function() {
                }
            },
            
        })
    </script>
</body>
</html>

2 父子组件获取信息

父组件与子组件即函数调用与被调用关系，而Vue中可以实现：
（1）父组件获取子组件所有信息，使用mounted，结合this.$refs.childName实现
（2）子组件获取父组件所有信息，使用created，结合this.$parent实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        var Child = {
            template: `
            <div>子组件</div>
            `,
            created: function() {
                console.log("我是子组件输出，获取父组件")
                console.log(this.$parent)
            }
        }
        var Parents = {
            template: `
            <div>
                父组件
                <slot name = "test"></slot>
                <child ref = "refsTest"></child>
            </div>
            `,
            components: {
                Child
            },
            mounted: function() {
                console.log("我是父组件输出，获取子组件")
                console.log(this.$refs.refsTest)
            }
        }
        new Vue({
            el: "#app",
            components: {
                Parents
            },
            template:`
            <div>
                <parents>
                    <div>测试Slot</div>
                    <div slot="test">测试Slot--具名</div>
                </parents>
            </div>
            `,
            data:function() {
                return {
                    variableName:"我是变量值"
                }
            },
            methods:{
                methodName: function() {

                }
            },
            watch:{
                variableName(){
                    
                }
            }   
        })
    </script>
</body>
</html>

3 父子组件通信

父子组件相互传递信息。

3.1 父组件向子组件发送信息

（1）在子组件中定义props，声明接收数据的变量
（2）父组件中调用字组件时，对props中定义变量进行赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        var Child = {
            template: `
            <div>
                <p>子组件</p>
                <div>fromParent:{{ fromParents }}</div>
            </div>
            `,
            props: ["fromParents"],
        }
        var Parents = {
            template: `
            <div>
                父组件
                <slot name = "test"></slot>
                <child ref = "refsTest" fromParents="父组件数据"></child>
            </div>
            `,
            components: {
                Child
            },
        }
        new Vue({
            el: "#app",
            components: {
                Parents
            },
            template:`
            <div>
                <parents>
                    <div>测试Slot</div>
                    <div slot="test">测试Slot--具名</div>
                </parents>
            </div>
            `,
            data:function() {
                return {
                    variableName:"我是变量值"
                }
            },
 
        })
    </script>
</body>
</html>

3.2 子组件向父组件发送信息

子组件向父组件发送消息，实现步骤：
（1）子组件中定义发送事件，通过this.$emit(“eventName”, data)定义发送事件
（2）父组件中接收该事件，即@eventName=“funcitonName”，并定义接收数据的函数名称，在methods中定义接收子事件数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        var Child = {
            template: `
            <div>
                <p>子组件</p>
                <div>fromParent:{{ fromParents }}</div>
                <button @click="toParent">向父组件发送信息</button>
            </div>
            `,
            props: ["fromParents"],
            methods:{
                toParent: function() {
                    this.$emit("toParentEvent", "我来自子组件")
                }
            }
        }
        var Parents = {
            template: `
            <div>
                父组件
                <slot name = "test"></slot>
                <child ref = "refsTest" fromParents="父组件数据" @toParentEvent="fromChild"></child>
                <div>来自子组件的消息：{{ msg }}</div>
            </div>
            `,
            components: {
                Child
            },
            data: function() {
                return {
                    msg: ""
                }
            },
            methods: {
                fromChild: function(val) {
                    this.msg = val
                }
            }
        }
        new Vue({
            el: "#app",
            components: {
                Parents
            },
            template:`
            <div>
                <parents>
                    <div>测试Slot</div>
                    <div slot="test">测试Slot--具名</div>
                </parents>
            </div>
            `,     
            
        })
    </script>
</body>
</html>

天然玩家

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础系列：组件及父子组件通信

1 组件组件即封装的功能。1.0 局部组件局部组件使用Vue.extend(“component-name”, object)定义，或者直接使用var定义，需要在Vue对象中注册使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫