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

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

外部引入

HTML部分

script部分

效果

全局组件

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

例如：

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

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}}

})

nelhzuKRGw Vue({

el:'.father,

data:{

val:'添加失败！'

}

})

总结

以上所述是给大家介绍的Vue组件全局注册实现警告框的实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。