三、组件间通信（$parent $refs）

父组件要想获取子组件的数据：
①在调用子组件的时候，指定ref属性
<child-component ref="mySon"></child-component>

②根据指定的引用的名字 找到子组件的实例对象
this.$refs.mySon

子组件要想获取父组件的数据：
①直接读取
this.$parent

：：：通过this.$refs拿到子组件的数据

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>组件间通信-01</title>

    <script src="js/vue.js"></script>

 </head>

 <body>

  <div id="container">

        <p>{{msg}}</p>

        <dahua></dahua>

    </div>

    <script>

    //vue提供的ref

        Vue.component("dahua",{

            data:function(){

                return{

                    mySonName:""

                }

            },

            methods:{

            //通过$refs拿到指定的所引用的对应的组件的实例对象

                getSonName:function(){

                    this.mySonName = this.$refs.mySon.name;

                }

            },

            template:`

                <div>

                    <h1>这是父组件</h1>

                    <button @click = "getSonName">获取子组件数据</button>

                    <span>{{mySonName}}</span>

                    <hr>

                    <xiaohua ref="mySon"></xiaohua>

                </div>

            `

        })

//    创建子组件

        Vue.component("xiaohua",{

            data:function(){

                return{

                    name:"小花"

                }

            },

            template:`

                    <h1>这是子组件</h1>

            `

        })

        new Vue({

            el:"#container",

            data:{

                msg:"Hello VueJs"

            }

        })

    </script>

 </body>

</html>

子组件通过$parent获取父组件的数据

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>组件间通信-02</title>

    <script src="js/vue.js"></script>

 </head>

 <body>

  <div id="container">

        <p>{{msg}}</p>

        <dahua></dahua>

    </div>

    <script>

        //创建子组件

        Vue.component("dahua",{

            data:function(){

                return{

                    myName:"大花"

                }

            },

            template:`

                <div>

                    <h1>这是父组件</h1>

                    <hr>

                    <xiaohua></xiaohua>

                </div>

            `

        })

        //创建子组件

        Vue.component("xiaohua",{

            data:function(){

                return{

                    msg:""

                }

            },

            template:`

                <div>

                        <h1>这是子组件</h1>

                        <p>{{msg}}</p>

                </div>

            `,

            created:function(){

                //在子组件创建完成时获取父组件的数据

                //保存在msg中在p标签中显示

                    this.msg = this.$parent.myName;

            }

        })

        new Vue({

            el:"#container",

            data:{

                msg:"Hello VueJs"

            }

        })

    </script>

 </body>

</html>

vue组件父子间通信02的更多相关文章

  1. vue组件父子间通信之综合练习--假的聊天室

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue组件父子间通信01

    子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...

  3. Vue组件实例间的直接访问

    前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...

  4. vuex-- Vue.的中心化状态管理方案（vue 组件之间的通信简化机制）

    vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...

  5. vue组件之间的通信， 父子组件通信，兄弟组件通信

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...

  6. vue组件之间的通信，父子之间的数据通信

    父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...

  7. vue父子间通信案列三($emit和prop用法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue父子间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  9. vue组件之间的通信

    1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...

随机推荐

  1. HTTP1.0、HTTP 1.1、HTTP 2.0之间的主要区别

    HTTP1.0与HTTP 1.1的主要区别  长连接 节约带宽 HOST域 HTTP1.1与HTTP 2.0的主要区别  多路复用 二进制分帧 首部压缩 服务器推送 一.HTTP1.0与HTTP 1. ...

  2. mysql随机取一条记录

    function getTodayLook($limit) { $sql = "select * from `tvhome_movie_today` order by rand() limi ...

  3. PHP 图片合成、仿微信群头像

    PHP 图片合成.仿微信群头像 参考文章: 作者:凯歌~,php图片合成方法(多张图片合成一张). 经过测试,略作调整和注释,感谢分享. 欢迎提出改善优化意见! 示例代码: /** * 合成图片 * ...

  4. python 文件操作、shutil模块

    参考自:https://www.cnblogs.com/alex3714/articles/5717620.html 1. 文件基础操作 f = open('test.txt') #打开文件 firs ...

  5. Cannot find the declaration of element 'ehcache'.

    ehchahe.xml中报错: Cannot find the declaration of element 'ehcache'. 由于 <?xml version="1.0" ...

  6. java:Set对象TreeSet有序子类，HashSet无序子类，重复对象二

    TreeSet有序子类; HashSet无序子类 重复重复元素,Object对象是通过equals和hashCode来进行过滤的. 如果将上一篇提到中的例子中的TreeSet,换成HashSet,那么 ...

  7. 表格 td 设置宽度无效问题

    现在有个需求,就是表格的列不固定,都是动态加载的,想给每一列设置宽度,但是设置 width:100xp,没有效果,不过设置min-width:100px 就有效果了,table的宽度为 td的宽度和 ...

  8. 15 Spring Boot Shiro 验证码

    1. <dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha</a ...

  9. layer.confirm

    layer.confirm('确定不选择花车?', { title: false, btn: ['确定','取消'] //按钮 }, function(ind){ layer.close(ind); ...

  10. 货币系统 Money Systems

    母牛们不但创建了它们自己的政府而且选择了建立了自己的货币系统.由于它们特殊的思考方式,它们对货币的数值感到好奇. 传统地,一个货币系统是由1,,, 或 ,, 和 100的单位面值组成的. 母牛想知道有 ...