扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
怎么在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}}
` }) new Vue({ el:'.father, data:{ val:'添加失败!' } })
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流