元件中 子給父傳值

weixin_33831196發表於2018-09-21
元件

html 程式碼：

      <div id='app'>
          <my-father></my-father>
    </div>

js程式碼：

  <script src='js/vue.js'></script> 
   <script>
   Vue.component("my-father",{
       template:`
         <div>
           <h1>{{mess}}</h1>
           <my-child @send='rcvMsg'></my-child>
         </div>
       `,
       data:function(){
           return{
               mess:''
           }
       },
       methods:{
           rcvMsg:function(txt){
               this.mess=txt
           }
       }
   })
   
   Vue.component('my-child',{
       template:`
            <button @click='sendToFather'>傳給父元素</button>
         `,
       data:function(){
           return{
               msg:'我是子元件中的資料，要給父元件傳值'
           }
       },
         methods:{
         sendToFather:function(){
//                 this.$emit('自定義事件名',要傳輸的資料)
               this.$emit('send',this.msg)
         }  
       }
   })
   
   
   new Vue({
       el:"#app"
   })
</script>

效果圖：

12041578-ce60529cd5c953e5.png
14a6b88c-9881-4551-9d9c-d85f95de66f2.png

當點選按鈕，子元件中的內容會傳給父元件


12041578-349dd9dfa12767de.png
e363710d-9666-4c47-a790-b29d460b88a6.png

小練習

效果圖：

12041578-62fe31915f8d69cc.png
6578589b-11fb-48a3-95d8-82b192c6b562.png

在輸入框裡輸入內容後，點選按鈕 輸入內容就顯示在父元件裡了，


12041578-5b3520c1992cbb59.png
340168bb-53fb-4d31-9352-038fa1935da6.png

html程式碼：

  <div id='app'>
       <my-father></my-father>
 </div>

js 程式碼：

      <script src='vue.js'></script>
<script>
    Vue.component("my-father",{
        template:`
            <div>
              <h1>我是父元件</h1>
              <p>子元件傳過來的資料:<b>{{mess}}</b></p>
              <my-child @send='rcvMsg'></my-child>
            </div>
         `,
        data:function(){  
            return{
                mess:''
            }
        },
        methods:{
            rcvMsg:function(txt){
                this.mess=txt
            }
        }
    })
    
    Vue.component('my-child',{
        template:`
         <div>
            <h1>我是子元件</h1>
            <input type='text' v-model='msg'> <button @click='sendMsg'>傳送</button>
         </div>
        `,
        data:function(){
            return{
                msg:''
            }
        },
        methods:{
            sendMsg:function(){
                this.$emit('send',this.msg)
            }
        }
    })
    
   new Vue({
       el:'#app'
   })
</script>

子傳父 對話小練習：


12041578-0dd11632f735b95a.png
35f685a0-753b-410d-8aeb-c40a00117bcd.png

html程式碼如下：

 <div id='app'>
   <chat-room></chat-room>
 </div>

js程式碼如下：

  <script src='vue.js'></script>
  <script>
    Vue.component('chat-room',{
        template:`
          <div>
             <ul>
                <li v-for="(value,index) in chatcont">{{value}}</li>
             </ul>
             <user @send='rcvMsg' userName='jack'></user>
             <user @send='rcvMsg' userName='rose'></user>
           </div>
        `,
        data:function(){
            return{
                chatcont:[],
               
            }
        },
        methods:{
           rcvMsg:function(txt){
            
               this.chatcont.push(txt)
           }
        }
    })
    
    Vue.component('user',{
        props:['userName'],
        template:`
         <div>
           <label>{{userName}}</label>
           <input type='text' v-model='msg'>
           <button @click='sendMsg'>傳送</button>
        </div>
        `,
        data:function(){
            return{
                msg:''
            }
        },
        methods:{
            sendMsg:function(){
                this.$emit('send',this.userName+":"+this.msg)
            }
        }
    })
   new Vue({
       el:'#app'
   })
</script>

相關文章