vue的自定義組件和組件傳值


<div id="app">
        <div>{{pmessage}}</div> //父組件
        <child :message="pmessage"></child>//打開一個通道 綁定message 用來接受數據 類似於emit
</div>
     Vue.component('child',{
          props:['message'], //使用props 來接收信息
          template:'<h1>{{message}}</h1>' //需要暴露的信息
      });
     new Vue({
         el:'#app',
        data:{
           pmessage:'123' //父元素的值
        }
     });

props的使用。props可以是一個數組,也可以是一個對象。

let App = Vue.extend({ 定義自定義組件

template:'''<h1>hello world</h1>'

})

Vue.component('my-app',App);
let App = Vue.extend('child',{   //局部定義組件
    template:'<h1>hello world</h1>'   
});
   new Vue({
         el:'#app',
        components:{  //
        my-app:APP,
        }
     });  
//==========================
    new Vue({
         el:'#app',
       data:{},
       components:{
       'hello':{
           template:'<h1>hello world</h1>' 
        }
       }
     });      

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM