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

前端之家收集整理的这篇文章主要介绍了Vue组件全局注册实现警告框的实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

外部引入

HTML部分

script部分

{{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('关闭了'); } } });

效果

全局组件

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

例如:

我们来理解组件的创建和注册

  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实例创建之前,才在该根元素下面生效

例如:

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:'添加失败!' } })

总结

以上所述是小编给大家介绍的Vue组件全局注册实现警告框的实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/31946.html
vuevuevuevue组件全局注册警告框

猜你在找的Vue相关文章