2018-09-21组件（子给父传）

作者: 好多好多鱼z | 来源:发表于2018-09-23 19:18 被阅读0次

Vue_组件间传值
vue2.0 父子组件传值
react子组件、父组件相互传值
【Vue3 从入门到实战进阶式掌握完整知识体系】011-探索组
vue2.0小结
VUE组件之间传值
02.1 - vue 组件间传参 props
父子组件通信
uni组件传值注意
React 父子组件通信

子给父传（用$emit('事件',参数)）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>
       <my-father></my-father>
   </div>
    <script src='js/vue.js'></script>
    <script>
       Vue.component("my-father",{
           template:`
              <div>
                  <my-child @send='revMsg'></my-child>
                  <a href="#">{{mess}}</a>
             </div>
            `,
           data:function(){
               return{
                   mess:''
               }
           },
           methods:{
               revMsg:function(txt){
                   this.mess=txt
               }
           }
       }) 
       
       Vue.component("my-child",{
           template:`
              <button @click='sendMsg'>按钮</button>
           `,
           data:function(){
               return{
                   msg:'我是子组件中的数据，要传给父组件'
               }
           },
           methods:{
               sendMsg:function(){
//                   this.$emit('事件',参数)
                     this.$emit('send',this.msg)
               }
           }
           
       })
        
       new Vue({
           el:'#app'
       })
    
    </script>
</body>
</html>

QQ拼音截图未命名.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id='app'>
      <my-father></my-father>
  </div>
   <script src='js/vue.js'></script> 
   <script>
       Vue.component('my-father',{
           template:`
             <div>
                <h1>这是父组件</h1>
                <a>子组件传来的数据为{{jie}}</a>
                <my-child @app='jieshou'></my-child>

             </div>
           `,
           data:function(){
                return{
                    jie:''
                }
               
           },
           methods:{
               jieshou:function(ind){
                   this.jie=ind
                   
               }
               
           }
       })
       
       
       
       Vue.component('my-child',{
           template:`
         <div>
            <h1>这是子组件</h1>
            <input type='text' v-model='str'>
            <button @click="add">向父组件传递</button>
          </div>
           `,
        data:function(){
           return{
               str:''
           }
       },
       methods:{
        add:function(){
            this.$emit('app',this.str)
            
        }
        
        
    }
   
       })
      new Vue({
          el:'#app'
      })
    </script>
</body>
</html>

QQ拼音截图未命名.png