vue.js组件之j间的通讯二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <!--组件关联,将msg展示在页面,最终展示值为msg,所以需要使用msg进行传值-->
            父级:{{a}}
            <br />
            <child-com :msg="a">
            <!--//:msg相当于v-model进行数据绑定    -->

            </child-com>
        </div>
        <template id="child">
            <div>
                <h2>我是子组件</h2>
                <!--//在子组件中进行展示-->
                <input type="button" value="按钮"  @click="change"/>
                <strong>{{msg}}</strong>
            </div>
        </template>
    </body>
    <script>
        var app =new Vue({
            el:"#app1",
            data:{
                a:‘我是父组件的数据‘

            },
            /*//子组件,利用props进行数据传递:*/
            components:{
                ‘child-com‘:{
                    props:[‘msg‘],
                    template:‘#child‘,
                    methods:{
                        change(){
                            this.msg=‘被更换了‘
                        }
                    }
                }
            }
        })
    </script>
</html>

在更改子组件数据的时候,是可以进行更改的,通过change方法进行更改:

展示结果:

点击change之后:

问题:子组件数据更改,怎么去更改父组件的数据呢:禁止通过props去更改数据

解决方案:

一:每次进行传值采用对象进行传值,对象之间是引用的,所以在更改之后是引用的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <!--组件关联,将msg展示在页面,最终展示值为msg,所以需要使用msg进行传值-->
            父级:{{giveData.a}}
            <br />
            <child-com :msg="giveData">
            <!--//:msg相当于v-model进行数据绑定    -->

            </child-com>
        </div>
        <template id="child">
            <div>
                <h2>我是子组件</h2>
                <!--//在子组件中进行展示-->
                <input type="button" value="按钮"  @click="change"/>
                <strong>{{msg.a}}</strong>
            </div>
        </template>
    </body>
    <script>
        var app =new Vue({
            el:"#app1",
            data:{
                giveData:{
                    a:‘我是父组件的数据‘
                }

            },
            /*//子组件,利用props进行数据传递:*/
            components:{
                ‘child-com‘:{
                    props:[‘msg‘],
                    template:‘#child‘,
                    methods:{
                        change(){
                            this.msg.a=‘被更换了‘
                        }
                    }
                }
            }
        })
    </script>
</html>

展示效果:

更改之后数据:

如果不想报错:可以进行给改自己的数据,然后通过mounted函数,将更改的数据传递给自己.

如果想更改自己数据,不更改父组件的案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <!--组件关联,将msg展示在页面,最终展示值为msg,所以需要使用msg进行传值-->
            父级:{{a}}
            <br />
            <child-com :msg="a">
            <!--//:msg相当于v-model进行数据绑定    -->

            </child-com>
        </div>
        <template id="child">
            <div>
                <h2>我是子组件</h2>
                <!--//在子组件中进行展示-->
                <input type="button" value="按钮"  @click="change"/>
                <strong>{{b}}</strong>
            </div>
        </template>
    </body>
    <script>
        var app =new Vue({
            el:"#app1",
            data:{

                    a:‘我是父组件的数据‘

            },
            /*//子组件,利用props进行数据传递:*/
            components:{
                ‘child-com‘:{
                    data(){
                        return {
                            b:‘‘
                        }
                    },
                    props:[‘msg‘],
                    template:‘#child‘,
                    mounted(){
                        this.b=this.msg;
                    },
                    methods:{
                        change(){
                            this.b=‘被更换了‘
                        }
                    }
                }
            }
        });
    </script>
</html>

更改子组件数据,就是更改子组件的数据.

展示效果:

change之后:

原文地址:https://www.cnblogs.com/xiufengchen/p/10349435.html

时间: 2024-11-05 22:06:25

vue.js组件之j间的通讯二的相关文章

vue.js组件之j间的通讯一 子组件接受父祖件数据

Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有:

vue.js组件之j间的通讯三,通过单一事件来管理组件通讯

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <di

vue.js 组件之间如何实现数据传递?

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文和大家分享的就是vue.js  组件之间传递数据相关内容,一起来看看吧,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册

如何理解vue.js组件的作用域是独立的

vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内data数据,如果要用父组件的必须用props传递:3.子组件标签的数据,使用父组件内的data数据 案例代码: <div id="demo"> <my-component v-if="show" v-bind:my-message="messa

如何对第一个Vue.js组件进行单元测试 (上)

首先,为什么要单元测试组件? 单元测试是持续集成的关键.通过专注于小的.独立的实体,确保单元测试始终按预期运行,使代码更加可靠,你可以放心地迭代你的项目而不必担坏事儿. 单元测试不仅限于脚本.可以独立测试的任何东西都是可单元测试的,只要你遵循一些好的做法.这些实例包括单一责任.可预测性和松散耦合. 作为我们应用程序的可重用实体,Vue.js组件是单元测试的理想选择.我们将用不同的输入和交互测试做好的单个单元,并确保它始终按照我们的预期运行. 在开始之前 Vue CLI 3发布了.Vue Test

Vue.js 组件精讲

课程介绍:你会学到什么        了解 Vue.js 组件开发的精华        Vue.js 组件知识全覆盖        掌握多种 Vue.js 组件开发的模式        独立组件不依赖 Vuex 和 Bus 情况下,各种跨级通信手段(provide / inject.broadcast / dispatch.findComponents 系列)        7 个完整的 Vue.js 组件示例        如何做好一个开源项目        Vue.js 容易忽略的 API

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

vue.js 组件之间传递数据

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文就这个知识点和大家一起来扒一扒,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册一个子组件 Vue.component(

Vue.js组件学习

组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <the-component></the-