码迷,mamicode.com
首页 > 其他好文 > 详细

vue的自定义组件和组件传值

时间:2018-06-07 14:20:57      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:使用   信息   code   .com   let   data   hello   一个   定义   

<div id="app">
        <div>{{pmessage}}</div> //父组件
        <child :message="pmessage"></child>//打开一个通道 绑定message
</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> 
        }
       }
     });      

 

vue的自定义组件和组件传值

标签:使用   信息   code   .com   let   data   hello   一个   定义   

原文地址:https://www.cnblogs.com/l8l8/p/9149511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!