介绍 & lt; ! DOCTYPE html>
& lt; html>
,& lt; body>
& lt;才能div id=癮pp"比;
,,& lt; !——,注意:,#应用是Vue实例挂载的元素,应该在挂载元素范围内使用组件——比;
,,& lt; my-component> & lt;/my-component>
& lt;才能/div>
,& lt;/body>
,& lt; https://www.yisu.com/zixun/script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js ">
<>脚本
<！——1。创建一个组件构造器- ->
myComponent var添加=Vue.extend ({
模板:“ & lt; ! DOCTYPE html>
& lt; html>
,& lt; body>
& lt;才能div id=癮pp"比;
,,& lt; !——, 3只组件只能在#应用下使用——比;
,,& lt; my-component> & lt;/my-component>
& lt;才能/div>
,& lt;/body>
,& lt; script src=https://www.yisu.com/zixun/" js/vue.js ">
<>脚本//1 .创建一个组件构造器
myComponent var添加=Vue.extend ({
模板:“ & lt; div id=癮pp2"比;
,& lt; !——,不能使用组件组件,因为组件是一个局部组件,它属于#应用——比;
,& lt; my-component> & lt;/my-component>
& lt;/div>
& lt; script>
,Vue ({new
el才能:& # 39;# app2 # 39;
,});
& lt;/script> //,全局注册,my-component1是标签名称
Vue.component (& # 39; my-component1& # 39;, {
,模板:& # 39;& lt; div>却;能够is 从而first 组件! & lt;/div> & # 39;
})
var vm1 =, Vue ({new
,el: & # 39; # app1 # 39;
}) var vm2 =, Vue ({new
,el: & # 39; # app2 # 39;
,组件:{//才能,局部注册,my-component2是标签名称
& # 39;才能my-component2& # 39;:, {
,,,模板:& # 39;& lt; div>却;能够is 从而second 组件! & lt;/div> & # 39;
,,},//才能,局部注册,my-component3是标签名称
& # 39;才能my-component3& # 39;:, {
,,,模板:& # 39;& lt; div>却;能够is 从而third 组件! & lt;/div> & # 39;
,,}
,}
}
如何在vue中使用注册组件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
<强>一、介绍
,,,,,,组件系统是Vue。js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树
,那么什么是组件呢?
,组件可以扩展HTML元素,封装可重用HTML的代码,我们可以将组件看作自定义的HTML元素。
<强>二,如何注册组件
,,Vue。js的组件的使用有3个步骤:创建组件构造器,注册组件和使用组件。
,下面用代码演示这三步
这是我的第一个组件!
'
})
<！——2。注册组件,并指定组件的标签,组件的HTML标签为<组件> - ->
Vue.component (myComponent“组件”,添加)
<！——3。通过id=应用进行挂载- ->
新Vue ({
埃尔:“#应用”
});> ,,,运行结果如下:
,,<强>一、全局注册和局部注册
,,,,,,调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。
如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的组件属性实现局部注册。
,我自己的理解只要是组件就代表全局组件,组件代表局部组件
,,,上面的示例可以改为局部注册的方式:
这是我的第一个组件!
'
})
新Vue ({
埃尔:“#应用”,
组件:{//2。myComponent将添加组件注册到Vue实例下
myComponent“组件”:添加
}
});> ,,,,,,由于组件组件是注册在#应用元素对应的Vue实例下的,所以它不能在其它Vue实例下使用。
<强>,二,组件注册语法糖
,,,以上组件注册的方式有些繁琐,Vue。js为了简化这个过程,提供了注册语法糖
,,,,,,Vue.component()的第1个参数是标签名称,第2个参数是一个选项对象,使用选项对象的模板属性定义组件模板。
使用这种方式,Vue在背后会自动地调用Vue.extend ()。
,,组件实现局部注册
