组件

2018-10-05 本文已影响0人子却

注册组件

注册组件分为全局注册和局部注册。

全局注册

2.png

step1.用Vue.component()方法定义一个组件，并为其命名；
step2.把重用的代码写到组件的template选项中；
step3.在模板中需要复用组件的地方，写上与组件同名的自定义标签调用组件。如<my-component></my-component>；
step4.为模板创建一个Vue实例，告诉浏览器这里需要用Vue.js来解释。如

<my-component id="com"></my-component>
<script>
    var app=new Vue({
        el:"#com"
    })
</script>

注：

template.png

Vue.component()方法中的第一个参数是我们定义的组件的名字。在这个名字的两端放上引号，使其成为一个字符串；
第二个参数是一个JavaScript对象，里面有组件包含的数据、方法和模板等内容；
组件中也可以添加methods和computed等选项，但需要注意以下几点：
- 组件中绝对不能添加el项。因为如果组件中添加了el项，它就绑定了模板中的某个元素，也就失去了复用的特点，所以组件中不能添加el项；
- data选项中的数据必须使用匿名函数返回，而不能直接定义，这样做是为了保证复用时组件中数据的独立性。

组件命名规则

组件的名称不能和HTML标签相同，这样浏览器会自己解释这个标签，而不会让Vue实例来解释；
组件名必须由多个单词组成，这样就不会与HTML元素同名；
组件的起名可以采用kebab-case法或 PascalCase法。只有使用kebab-case法命名才可以用"使用和组件同名的标签来调用组件"。

题1.png

上图由于命名问题导致代码无法正常运行，解决方案：
1.将第10行中的myComponent，改为my-component ；
2.将第12行中的myComponent，改为mycomponent ；

在组件中添加复用的模板

在组件中的template选项中添加模板；
template里面的内容必须包含在一个元素里面，且最外层必须只有一个元素；

局部注册

局部注册.png

父子组件

注：组件拥有属于自己的独立作用域，也就是说它只认识、只能调用注册时添加的选项中的数据，即一个组件是不认识关联实例中的数据项的，如下图：

组件.png

上图浏览器刷新结果会报错，因为它并不知道date、title、content分别所对应的值是多少。

props选项工作原理

props.png

字符串的值

1.把props: ["date", "title", "content"]中的字符串两端的引号去掉，可以得到该字符串的值，即字符串"date"的值是date，字符串 "title"的值是title等；
2.与组件同名的<my-component>标签多了一个名为date的属性，可以在调用组件标签时，为这些属性赋值，如：

<my-component date="date" title="title" content="content"></my-component>

得到的结果是：

添加属性.png

3.如上图效果，若想将实例的数据传入组件中，就得使用v-bind语句

props选项中的prop属性是<my-component>的属性，所以它属于<my-component>组件。

props选项命名

props命名.png

组件