<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>' } } });