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

时间：2022-06-25 16:00:42 编辑：袖梨来源：一聚教程网

外部引入

css.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">

HTML部分

script部分

`, //注意：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步：创建组件构造器，注册组件，挂载作用域内实例化

例如：

' }) // 2.注册组件，并指定组件的标签，组件的HTML标签为 Vue.component('my-component', myComponent) new Vue({ el: '#app' });

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

Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。
Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器,也就是说
Vue.component('标签名',Vue.extend())=>
Vue.component('标签名', {template:' '})
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组件全局注册实现警告框的实例详解

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程