compontent组件名称如何定义？

Vue.component('name', { /* ... */ })

第一个参数就是“name'”组件的名字。

如果我们想在HTML中写这样的的组件名称，<my-name></my-name>。

那么我们在对组件进行定义的名称的时候要这样写

Vue.component('yName', { /* ... */ })

即首字母大写。

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

全局注册

Vue.component('MyName', { // ... 选项 ... })

全局注册简单的来说，在任何地方都可以使用这个组件

局部注册

var MyName={// ... 组件内容 ...}

局部注册后然后在components里面定义一下。

new Vue({	el:"#demo",	components:{		'my-name': MyName,	}})

定义component组件

首先我们来定义简单的组件一个写法。

HTML

javascript

关于这个<script type="text/template" id="template">写法，可以参考前期写的这篇文章。

我们在输出页面上可以看到有两个点击按钮。接下来，我们想点击按钮执行点击弹出内容加一操作。

点击事件是用什么指令？用v-on,关于v-on操作可以参考这篇文章

原HTML不变。

javascript

script type="text/template" id="template">	按钮点击{
    {msg}}次

这里需要注意的是，data必须是一个函数，那么data为什么是一个函数呢？假如组件中的data不是函数也可以执行的话，那么会和当前实例中的data起冲突。改变其一，另外一个也会随着改变。但是如果组件中data是一个函数的话，那么里面所定义的内容只在当前有效，不会污染到其它地方。

组件注册分为全局注册和局部注册，上面的实例给出的是全局注册。

通过 Prop 向子组件传递数据

HTML

javarscript

通过v-for来循环相似的的模块

例

HTML

     
	
      
       		{
    {"字组件引用:"+post.title}}	
      
     

javascript

现在我们想在msg这个组件里面再加h1内容。

这是错误的写法，因为每个组件中都只能用一个根元素，所以要建立一个标签然后使期包裹起来。

按照上面得出，下面这个是正确的写法

现在有一个需求，就是点击子组件里面的按钮，然后改变父级里面所有字体的大小。

HTML

     
	
      
		
       
        			{
    {"字组件引用:"+post.title}}		
       	
      
     

javascript

如果想让子改变父，那么首先在父定义一个想要改变的事件。然后在子使用$emit("父级定义的事件名称"。

当事件内容过多的时候，我们写在当前元素不好，不利于阅读。我们要写在methods方法里面。

HTML

     
	
      
		
       
        			{
    {"字组件引用:"+post.title}}		
       	
      
     

javascript

组件上使用v-model

HTML

javascript