优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

Vue组件全局注册实现警告框的实例详解

时间:2018-06-11 11:42:34 编辑:猪哥 来源:转载

外部引入



<script type="text/javascript" src="../js/vue-2.5.16.js"></script>

HTML部分

 
   
   
   
   
 

script部分

<script type="text/javascript">
   Vue.component('my-info',{
   template:`
     
     
       
       {{data}}
       
     
     
     `,
     //注意:data必须是一个函数
     data(){
       return {
       isShow:true
       }
     },
     props:['data'],
     methods:{
       close(){
       //子组件向父组件发射事件
       this.$emit('close');
       //关闭消息框
       this.isShow = false;
       }
     },
   });
   new Vue({
     el:'.container',
     data:{
       msg:'添加失败!'
     },
     methods:{
       closeHandler(){
       console.log('关闭了');
       }
    }
  });
 </script>

效果

Vue组件全局注册实现警告框的实例详解

全局组件

组件的创建和注册分成3步:创建组件构造器,注册组件,挂载作用域内实例化

例如:

  
  

<script>
  // 1.创建一个组件构造器
  var myComponent = Vue.extend({
    template: '这是我的全局组件'
  })
  
  // 2.注册组件,并指定组件的标签,组件的HTML标签为
  Vue.component('my-component', myComponent)
  
  new Vue({
    el: '#app'
  });
</script> 

大家来理解组件的创建和注册:

  1. Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器,而不是一个具体的组件实例。
  2. Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML。
  3. 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器,也就是说
  4. Vue.component('标签名',Vue.extend())=>
  5. Vue.component('标签名', {template:' '})
  6. Vue.component()方法内部会调用组件构造器,创建一个组件实例。

全局组件必须写在Vue实例创建之前,才在该根元素下面生效

例如:

   
   
 
 
   
 
 <script>
   new Vue({
     el: "#app"
   });
   Vue.component("my-component", {
     template: "

这是我的全局组件

" }); new Vue({ el: "#app1" }) </script>

Prop传值

组件实例的作用域是孤立的,父组件可以通过props向下传递数据给子组件。

Prop静态传递数据

 
   
 
Vue.component('child',{
  props:['msg',"data"],
  template:`

{{msg}}

{{data}}

` })

Prop动态传递数据

 
   
 
Vue.component('child',{
  props:["msg"],
  template:` 

{{msg}}

` }) new Vue({ el:'.father, data:{ val:'添加失败!' } })

文章评论

热门栏目

XML 地图 | Sitemap 地图