component组件学习

提交

  

组件的命名和DOM引用方式：

kebab-case 短横线分隔命名：例如：my-component my-component-name

PascalCase 驼峰和首字母大写命名：例如：MyComponent myComponent

注意：

直接在DOM中使用时只有kebab-case 短横线分隔命名有效。所以直接在DOM中使用自定义组件时，自定义组件名：字母全小写必须包含 -(横线)一个连字符。

组件 (Component) 分全局组件和局部组件两种

全局组件注册方式：

Vue.component(组件名,{方法})

Vue.component("my-component",{

　　template:"我是全局组件"

});

注意：

全局组件必须写在Vue实例创建之前，才在该根元素下面生效；

模板里面第一级只能有一个标签，不能并行。例：

Vue.component("my-component", {

　　template: "我是全局组件"+"

我是全局组件内标签

});

Vue.component("my-component", {

　　template: "我是全局组件

"+"我是全局组件内标签

});

局部组件注册方式，直接在Vue实例里面注册

var child={

　　template:"我是局部组件"

};

new Vue({

　　el: "#app1",

　　components:{

　　　　"child-component":child

　　}

});

注意：

属性名为components，s千万别忘了;

建议模板定义在一个全局变量里，代码看起来容易一点

props使用方法

Vue.component('my-component',{

　　props:['message'],

　　template:'{{message}}'

});

注意：

props 的声明需要放在template的前面

props可以使用实例中的变量赋值

如果使用PascalCase 驼峰和首字母大写命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名

全局组件可以获取用使用prop 的做操作

关于js变量命名要求

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）