Vue2 组件总结

注册全局组件

• 使用 Vue.component(...) 的方式创建全局组件，注册属性，创建模版

• props 属性：父组件传递数据到子组件。高级内容：Prop属性、Prop验证等

• this.$emit：将事件传递给父级组件

• <slot></slot>：插槽

<div id="app">
	<button-counter title="title1 : " @clicknow="clicknow">
		<h2>hi...h2</h2>
	</button-counter>
	<hr/>
	<button-counter title="title2 : "></button-counter>
</div>


<script>
 // 全局注册
Vue.component('button-counter', {
	props: ['title'],	// 接收父组件传值
	data: function () {
		return {
		  count: 0
		}
	},
	template: `<div><h1>hi...</h1>
		<button v-on:click="clickfun">
		{{title}} You clicked me {{ count }} times.</button>
		<slot></slot>
		</div>`,
	methods:{
		clickfun : function () {
			this.count ++;
			this.$emit('clicknow', this.count);	// 给父组件传递事件
		}
	}
})
  
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {
			console.log(e);
		}
	}
});
</script>

注册局部组件

按需引入组件：创建 Vue 实例时，使用 components 属性指定要使用的组件

<div id="app">
  <test></test>
</div>


<script>
  new Vue({
    el: '#app',
    components: {
      'test': {
        data: function() {
          return {
            title: 'local-scope-component'
          }
        },
        template: '<h2> {{ title }} </h2>'
      }
    }
  })
</script>

单文件组件

创建单文件组件

<template>
	<div>
		<h1> {{title}} </h1>
		<h2> {{ msg }}</h2>
	</div>
</template>

<script>
	export default {
		name: 'testComponent',
		data: function() {
			return {
				title: ' test component '
			}
		},
		props: {
			msg: {
				type: String,
				default: ' [msg] '
			}
		}
	}
</script>

<style>
</style>

局部引入：

<template>
	<testComponent msg="mmmm"></testComponent>
</template>

<script>
	import testComponent from './components/test.vue'

	export default {
		name: 'App',
		components: {
			testComponent
		}
	}
</script>

练手：封装 quill 富文本组件

npm i quill -S

version： ^1.3.7

1. 封装组件

<template>
	<div class="editors">
		<div id="editor"></div>
	</div>
</template>

<script>
	import Quill from 'quill'
	import 'quill/dist/quill.snow.css'
	
	export default {
		props: {
			value: {
				type: String
			}
		},
		name: 'editorQuill',
		data: function() {
			return {
				quill: undefined
			}
		},
		mounted: function() {
			this.initEditor()
		},
		methods: {
			initEditor() {
				this.quill = new Quill('#editor', {
					theme: 'snow'
				});
				// 这样初始化不是一种好方法
				this.quill.setContents([{
					insert: this.value
				}])
				// this.$emit 有报错
				this.quill.on('text-change', () => {
					this.$emit('change', this.quill.getContents())
				})
			}
		}
	}
</script>

<style scoped>
	.editors {
		width: 450px;
	}
</style>

2. 引入并使用

<template>
	<editor @change="changeEditor" v-bind:value="content">
		</editor>
</template>

<script>
	import editor from '@/components/outer/editor.vue'

	export default {
		name: 'App',
		data: function() {
			return {
				content: 'engure'
			}
		},
		components: {
			editor
		},
		methods: {
			changeEditor(tex) {
				console.log(tex)
			}
		}
	}
</script>

<style>
</style>

要点：封装组件的同时还需要考虑数据的出入