外部引入
rush:js;">
HTML部分
rush:js;">
script部分
rush:js;">
全局组件
组件的创建和注册分成3步：创建组件构造器，注册组件，挂载作用域内实例化
例如：
rush:js;">
我们来理解组件的创建和注册：
- Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。
- Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
- 使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器,也就是说
- Vue.component('标签名',Vue.extend())=>
- Vue.component('标签名',{template:' '})
- Vue.component()方法内部会调用组件构造器，创建一个组件实例。
全局组件必须写在Vue实例创建之前，才在该根元素下面生效
例如：
rush:js;">
Prop传值
组件实例的作用域是孤立的，父组件可以通过props向下传递数据给子组件。
Prop静态传递数据
rush:js;">
Vue.component('child',{
props:['msg',"data"],template:`
{{msg}}
{{data}}
` })Prop动态传递数据
rush:js;">
Vue.component('child',{
props:["msg"],template:`
{{msg}}
` }) new Vue({ el:'.father,data:{ val:'添加失败！' } })总结
以上所述是小编给大家介绍的Vue组件全局注册实现警告框的实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
