Vue 组件的使用

Vue组件：可以拓展HTML的元素，可以封装有重用性的代码，Vue组件同时也就是一个Vue实例，我们可以把这个组件作为自定义元素来使用。当组件进行复用时，没使用一次组件就会有一个新的实例被创建。

Vue模板通常是由三部分组成：

html：

<template>
<div id=”app”>
	<h3>first one is:<span>{{ title }}</span></h3>
    <demo1 v-bind:users="users"  v-on:passParent="showTitle"></demo1>
    
    <div class="line"></div>
    <component-demo></component-demo>
      
    <div class="line"></div>

    <demo2 v-bind:users="users"></demo2>

    <div class="line"></div>
    <button style="width:100px;height:50px;" @click="insertDemo3">demo3</button> 
    <div id="demo3-container" v-bind:max='max'></div>

    <div class="line"></div>
    <demo4 v-bind:demo4-txt="title"></demo4>

    <div class="line"></div>
    </div>
</template>

js

<script>
import demo1 from './components/demo1'
import demo2 from './components/demo2'
import demo3 from './components/demo3'
import Vue from 'vue';

export default {
	name: 'App',
    data(){
        return{
         	title: "none",       
    }
},
components：{
    demo1, 
    demo2,
    //局部注册
    'component-demo': {
        template: '<h4>component-demo</h4>'
    }
}
props:[…],
methods:{
    showTitle(e){
      	console.log("changed!")
      	this.title = e
    }
},
mounted(){
        
},
computed(){

},
watch(){
        
},
created(){
    	Vue.component('demo4', {
        	name:'demo4',
        	data(){
            	return{
                	txt : ' test'
            	}
        	},
        	props:['demo4Txt'],
        	template:'<p>this is demo4:{{ demo4Txt }}!</p>'
      	})     
      	//created期间注册组件，component注册组件
  	}
 }
</script>

css：省略

总结有几种方式创建注册组件components

1. 单文件组件（结构如上例）通过import demo1 from ‘./components/demo1’引入，然后在components属性中加入demo1，在模板中即可使用<demo1></demo1>使用组件，属于局部注册
2. 也可以像component-demo一样直接在components选项中局部注册
3. 在created时期（及created()方法内）调用Vue.component()方法全局注册组件，可用在注册后任何通过new Vue创建的Vue根实例，也包括其组件树中的所有子组件中
4. 使用Vue.extend()方法创建构造器，同样是全局注册

组件间的数据传递

父组件动态传递给子组件

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。而对于父组件来说，只需要在使用时使用v-bind进行动态传递。

两种情况需要注意：

1. 当prop作为初始值传入后，为了在子组件内部改变它不影响到父组件的状态，子组件想作为局部变量来用。需要先定义一个局部变量，并用prop值初始化它，例如

   props: ['test'],
       data(){
           return{
               _test: this.test
           }
       }
   

2.  定义一个计算属性，处理prop的值并返回

props: ['name'],
    computed: {
     _name: function(){
     	return this.num.trim().toLowerCase()
    }
}

子组件动态传递给父组件

Props是单项绑定，即当父组件的属性变化时，会将数据传递给子组件，但反过来不会。要传给父组件，需要两方面： 

1. 父组件使用$on(event)监听事件，在使用子组件的地方直接用 v-on 来监听子组件触发的事件，例如

   <demo1 v-bind:users="users"  v-on:passParent="showTitle"></demo1>

2. 子组件使用$emit(event)触发事件，例如

   <li @click="changeTitle($event)"> </li>
   …
   methods:{
           changeTitle(e){
               console.log(e);
               this.$emit("passParent", e.target.innerText);
               console.log(e.target.innerText)
           }
   }
   

   li点击后会触发调用changeTitle方法，然后子组件触发passParent事件，将参数传递给父组件，父组件则会调用showTitle方法