组件:非父子传值

1.父给子传值 属性 props:['属性']

2.子给父传 用事件传 $emit

3.非父子 用第三方量
例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <div class="itany">
   <child></child>
   <child2></child2>
 </div>
<script src="vue.js"></script>
<script>
    var the=new Vue()
   Vue.component('child',{        
        template:`
            <div>
                <p>这是child1</p>
                <button @click="show">传值</button>
            </div>
        `,
       data:function(){
           return{
               mess:'hello Vue'
           }
       },
       methods:{
           show:function(){
               the.$emit('send',this.mess)
           }
       }
        })
   Vue.component('child2',{
       template:`
            <div>
                <p>这是child2</p>
                <a href="#">{{msg}}</a>
            </div>
        `,
       data:function(){
           return{
               msg:''
           }
       },
       mounted:function(){
         the.$on('send',mess=>{
             this.msg=mess;
         }) 
      }
   })
    new Vue({
        el:'.itany'
    })
  </script>
</body>
</html>

注释:点击传值在子组件中传入a标签

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,126评论 1 12
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 10,938评论 0 32
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,810评论 19 139
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,073评论 0 25
  • 做过许多关于爱情的美好的梦,醒来才发现,是梦一场。 曾经把爱情看得十分重要,一个人25年了,到了二十几岁的年纪,突...
    穆念晴阅读 3,671评论 8 9

友情链接更多精彩内容