VUE学习-组件

组件

组件是可复用的 Vue 实例，且带有一个名字。

<div id="components-demo">
	<button-counter></button-counter>
</div>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
	data: function () {
		return {count: 0}
	},
	template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
new Vue({ el: '#components-demo' })
</script>

注意：

• 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
• 每个组件必须只有一个根元素
• 有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
• 全局注册的组件可以在任何父组件或者子组件使用，局部注册的组件在其子组件中不可用。
• 全局注册的行为必须在根 Vue 实例 (通过 `new Vue`) 创建之前发生。
• 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
• 对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。class 和 style attribute 会稍微智能一些，即两边的值会被合并起来
• inheritAttrs: false 选项不会影响 style 和 class 的绑定。

注册组件

• 全局注册：Vue.component('comp-name',{})
• 局部注册：new Vue(components:{ 'comp-name':{},comp-obj })
• 组件命名：
  • my-component
  • MyComponent
• 使用模块系统注册

  <script>
  import ComponentA from './ComponentA';
  export default {components: {ComponentA}}
  </script>
  

• require.context： 只全局注册这些非常通用的基础组件。
  
  link：https://cn.vuejs.org/v2/guide/components-registration.html

自定义组件的v-model

<div id-"comp">
	<base-checkbox v-model="lovingVue" ></base-checkbox>
</div>
<script>
Vue.component('base-checkbox', {
	model: {
		prop: 'checked',
		event: 'change'
	},
	//注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。
	props: {checked: Boolean},
	template: `<input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)">`
})
new Vue({
	el: '#comp',
	data:{return { lovingVue: true}},
	methods:{}
})
</script>

传参

• props
  
  用一个 props 选项将其包含该组件可接受的 prop 列表

  • 可以为其指定类型props:{title: String}或者props:{title: {type: String}}
  • 为其指定类型域props:
  • type: [ String | Number | Boolean | Array | Object | Date | Function | Symbol | 自定义的构造函数]
  • 指定默认值props:{title: {default： "post-title"}}
  • 指定是否必须props:{title: {required： true}}
  • 指定验证函数 props:{title: {validator： function(v){return ['A','B'].indexOf(v) !== -1}}}

• <div id="comp">
  	<blog-post title="My journey with Vue"></blog-post>
  </div>
  <script>
  Vue.component('blog-post', {
  	props: {'title'},
  	template: '<h3>{{ title }}</h3>'
  })
  new Vue(el:'#comp')
  </script>
  

• $emit
  
  通过调用内建的 $emit 方法并传入事件名称来触发一个事件,操作父组件的data

  <div id="comp">
  	<blog-post v-on:click-count="click += 1" title="My journey with Vue"></blog-post>
  </div>
  <script>
  Vue.component('blog-post', {
  	props: {'title'},
  	template: `<div><button @click="$emit('click-count')">Enlarge text</button><h3>{{ title }}</h3></div>`
  })
  new Vue(el:'#comp',data:{return {click:1}})
  </script>
  

• v-slot
  
  绑定在 <slot> 元素上的 attribute 被称为插槽 prop。

  <div id="comp">
  	<current-user :user='user'>
  		<!-- 提取默认命名插槽的props -->
  		<template v-slot:default="slotProps">
  		{{ slotProps.user.firstName }}
  		</template>
  	</current-user>
  	<!-- 解构赋值提取默认命名插槽的user -->
  	<current-user v-slot="{ user }">{{ user.firstName }}</current-user>
  	<!-- 解构赋值提取默认命名插槽的user并自定义命名person -->
  	<current-user v-slot="{ user: person }">{{ person.firstName }}</current-user>
  	<!-- 解构赋值提取默认命名插槽的user并自定义属性默认值，用于插槽 firstName 是 undefined -->
  	<current-user v-slot="{ user = { firstName: 'Guest' } }">{{ user.firstName }}</current-user>
  	<!-- 动态指令参数也可以用在 v-slot 上，来定义动态的插槽名 -->
  	<current-user v-slot:[dynamicSlotName]="{ user }">{{ user.firstName }}</current-user>
  	<!-- v-slot:slotName="props"可以缩写成#slotName="props" -->
  	<current-user #default="{ user }">{{ user.firstName }}</current-user>
  </div>
  <script>
  Vue.component('current-user',{
  	props:{user:Object},
  	template:`<span><slot v-bind:user="user">{{ user.lastName }}</slot></span>`
  })
  new Vue({
  	el: '#comp',
  	data:{
  		return {
  			user{
  				firstName:'misuha',
  				lastName:'White'
  			},
  			dynamicSlotName:'default'
  		}
  	}
  })
  </script>
  

• slot & slot-scope ( 已废弃 )

  <div id="comp">
  	<current-user :user='user'>
  		<template slot="default" slot-scope="{user}">{{ user.firstName }}</template>
  	</current-user>
  </div>
  <script>
  Vue.component('current-user',{
  	props:{user:Object},
  	template:`<span><slot v-bind:user="user">{{ user.lastName }}</slot></span>`
  })
  new Vue({
  	el: '#comp',
  	data:{
  		return {
  			user:{
  				firstName:'sa',
  				lastName:'wh'
  			},
  			dynamicSlotName:'default'
  		}
  	}
  })
  </script>
  

<slot>

和 HTML 元素一样，我们经常需要向一个组件传递内容

当组件渲染的时候，<slot></slot> 将会被替换为“Something bad happened.”。插槽内可以包含任何模板代码，包括 HTML

<div id="alarm-comp">
	<alert-box>Something bad happened.</alert-box>
</div>
<script>
Vue.component('alert-box', {
	template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot</div>`
})
new Vue(el:'#alarm-comp')
</script>

<!--默认值，它只会在插槽没有提供内容的时候被渲染。-->
<button type="submit"><slot>Submit</slot></button>
<!--具名插槽（组件名：‘base-layout’），默认值name='default'-->
<div class="container">
	<header>
		<slot name="header"></slot>
	</header>
	<main>
		<slot></slot>
	</main>
	<footer>
		<slot name="footer"></slot>
	</footer>
</div>
<!--为具名插槽赋值-->
<base-layout>
	<template v-slot:header>
		<h1>Here might be a page title</h1>
	</template>
	<p>A paragraph for the main content.</p>
	<p>And another one.</p>
	<template v-slot:footer>
		<p>Here's some contact info</p>
	</template>
</base-layout>
<!--为具名插槽赋值的缩写-->
<base-layout>
	<template #header>
		<h1>Here might be a page title</h1>
	</template>
	<p>A paragraph for the main content.</p>
	<p>And another one.</p>
	<template #footer>
		<p>Here's some contact info</p>
	</template>
</base-layout>
<current-user #default="{ user }">{{ user.firstName }}</current-user>

is

在不同组件之间进行动态切换

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

<!-- 这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。 -->
<table>
	<blog-post-row></blog-post-row>
</table>
<!-- 这个特殊的 is attribute 给了我们一个变通的办法 -->
<table>
	<tr is="blog-post-row"></tr>
</table>

禁用 Attribute 继承

如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。

<script>
Vue.component('my-component', {
	inheritAttrs: false,
	// ...
})
</script>

$listeners

Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器。

{ focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },}

有了这个 $listeners property，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

<script>
Vue.component('base-input', {
	inheritAttrs: false,
	props: ['label', 'value'],
	computed: {
		inputListeners: function () {
			var vm = this
			// `Object.assign` 将所有的对象合并为一个新对象
			return Object.assign({},
				// 我们从父级添加所有的监听器
				this.$listeners,
				// 然后我们添加自定义监听器，或覆写一些监听器的行为,这里确保组件配合 `v-model` 的工作
				{input: function (event) {
					vm.$emit('input', event.target.value)
				}}
			)
		}
	},
	template: ` <label>{{ label }}
<input v-bind="$attrs" v-bind:value="value" v-on="inputListeners" > </label> `
})
</script>

现在 <base-input> 组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的 <input> 元素一样使用了：所有跟它相同的 attribute 和监听器都可以工作，不必再使用 .native 监听器。

.sync修饰符

<!--comp: 对其赋新值-->
<script>
Vue.compontent('text-document',{
	...
	this.$emit('update:title', newTitle)
	...
})
</script>
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text-document>

<text-document v-bind:title.sync="doc.title"></text-document>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的