组件：非父子传值

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>

12041882-09bee929c8840e80.png

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

组件：非父子传值

推荐阅读更多精彩内容