Vue中组件的创建方式(全局组件,局部组件)

Vue中组件的创建方式(全局组件,局部组件)

• 规则
  • 组件只能有一个根标签
  • 记住两个词全局和局部
  • 组件名称命名中‘-小写字母’相当于大写英文字母(hello-com 相当于 helloCom)

全局组件

定义方式示例：

Vue.component("hello-component",{
    props:["message"],
    template :"<div ><h1>组件定义之全局组件</h1><h4>{{message}}</h4></div>"
});

使用

<hello-component message=" global component"></hello-component>

• 属性介绍：
  • Vue.componen()是vue.js内部封装方法
  • “hello-component” 是使用时候的组件名称
  • props组件内的属性。供给组件内部传值
  • template组件内部DOM元素组成

品鉴
全局组件定义方式，是直接给全局对象Vue注册了一个组件。在本页内已挂载Vue 实例的DOM目标元素 都可以使用(区别于局部组件只能是挂载哪一个DOM，哪个才能使用)。

局部组件

定义方式示例：

var limitComponent = {
    props:["message"],
    template :"<div><h1>{{message}}</h1><input  \
    type='text' v-model='message'></input></div>"
}
new Vue ({
    el : "#app",
    components :{
        "child-component": limitComponent
    }
});

使用

<child-component message = "动态局部组件"></child-component>

• 属性介绍：
  *el是 Vue 实例的挂载目标
  • “components” 是注册仅在其作用域中可用的组件
  • "child-component"组件的名称(书写规则请上翻再看规则)
  • limitComponent通过对象方式传递组件

品鉴
你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件。
js中用反斜线“\”’实现字符串换行

通常以上两种方式（全局注册,局部注册）

加油，陌生人！(来来往往不陌生，希望对你有帮助)