vue-8-组件

注册一个全局组件：Vue.component(tagName, options)Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
<div id="example">
<my-component></my-component>
</div>new Vue({
el: '#example'
})局部注册：通过组件实例选项注册
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
el: '#example'，
components: {//<my-component> 将只在父模板可用
'my-component': Child
}
})

<table>
<tr is="my-row"></tr>
//==<my-row>...</my-row>,table下标签有HTML的限制可以换用is的形式
</table>

使用模板，这些限制将不适用：

1. <script type="text/x-template">

2. JavaScript 内联模板字符串

3. .vue 组件

<child my-message="hello!"></child>
//当使用的不是字符串模板,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：
Vue.component('child', {
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

props验证原生构造器类型：
String 、Number、 Boolean、 Function、 Object、 Array、 Symbol
type 也可以是一个自定义构造器函数，使用 instanceof 检测。Vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default:
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value >
}
}
}
})

<bs-date-input data-3d-date-picker="true"></bs-date-input>

<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter> //$on用来监听increment事件
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
//子组件：
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter:
}
},
methods: {
incrementCounter: function () {
this.counter +=
this.$emit('increment') //$emit用来触发increment事件，调用incrementTotal方法
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total:
},
methods: {
incrementTotal: function () {
this.total +=
}
}
})

//在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on
<my-component v-on:click.native="doTheThing"></my-component>

//双向绑定，只是作为一个编译时的语法糖
<comp :foo.sync="bar"></comp>

货币筛选器
html:
<div id="app">
<currency-input label="Price" v-model="price"></currency-input>
<currency-input label="Shipping" v-model="shipping"></currency-input>
<currency-input label="Handling" v-model="handling"></currency-input>
<currency-input label="Discount" v-model="discount"></currency-input>
<p>Total: ${{ total }}</p>
</div>js:
Vue.component('currency-input', {
template: '\
<div>\
<label v-if="label">{{ label }}</label>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
v-on:focus="selectAll"\
v-on:blur="formatValue"\
>\
</div>\
',
props: {
value: {
type: Number,
default:
},
label: {
type: String,
default: ''
}
},
mounted: function () {
this.formatValue()
},
methods: {
updateValue: function (value) {
var result = currencyValidator.parse(value, this.value)
if (result.warning) {
this.$refs.input.value = result.value
}
this.$emit('input', result.value)
},
formatValue: function () {
this.$refs.input.value = currencyValidator.format(this.value)
},
selectAll: function (event) {
setTimeout(function () {
event.target.select()
}, )
}
}
})new Vue({
el: '#app',
data: {
price: ,
shipping: ,
handling: ,
discount:
},
computed: {
total: function () {
return ((
this.price * +
this.shipping * +
this.handling * -
this.discount *
) / ).toFixed()
}
}
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
// this allows using the `value` prop for a different purpose
value: String
},
// ...
})

<child-component v-show="someChildProperty"></child-component>
//someChildProperty存在于父作用域

Vue.component('child-component', {
// someChildProperty存在于子作用域
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
})

<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
<slot name="footer"></slot>
//具名插槽
</div>

作用域插槽：//子组件的内容可以在父组件指定
父：
<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>子：
<ul>
<slot name="item"
v-for="item in items"
:text="item.text">
<!-- 这里写入备用内容 -->
</slot>
</ul>

var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变！ is指向的组件名随之变化-->
</component>

<keep-alive>
<component :is="currentView">
<!-- 非活动组件将被缓存！ -->
</component>
</keep-alive>

<div id="parent">
<user-profile ref="profile"></user-profile>
</div>var parent = new Vue({ el: '#parent' })// 直接访问子组件
var child = parent.$refs.profile

全局异步组件：
Vue.component(
'async-webpack-example',
() => import('./my-async-component')
)局部异步组件：
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})高级异步组件：//当一个异步组件被作为 vue-router 的路由组件使用时，这些高级选项都是无效的，因为在路由切换前就会提前加载所需要的异步组件
const AsyncComp = () => ({
// 需要加载的组件。应当是一个 Promise
component: import('./MyComp.vue'),
// loading 时应当渲染的组件
loading: LoadingComp,
// 出错时渲染的组件
error: ErrorComp,
// 渲染 loading 组件前的等待时间。默认：200ms。
delay: ,
// 最长等待时间。超出此时间则渲染 error 组件。默认：Infinity
timeout:
})

// 在组件定义中
components: {
// 使用 kebab-case 形式注册
'kebab-cased-component': { /* ... */ },
// register using camelCase
'camelCasedComponent': { /* ... */ },
// register using PascalCase
'PascalCasedComponent': { /* ... */ }
}

<!-- 在 HTML 模板中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

Vue.component('stack-overflow', {
template: '<div><stack-overflow></stack-overflow></div>'
})

父组件tree-folder：
<p>
<span>{{ folder.name }}</span>
<tree-folder-contents :children="folder.children"/>
</p>子组件tree-folder-contents：
<ul>
<li v-for="child in children">
<tree-folder v-if="child.children" :folder="child"/>
<span v-else>{{ child.name }}</span>
</li>
</ul>
循环引用时，需向注明模块化管理系统循环引用的组件间的处理优先级：beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

如果子组件有 inline-template 特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。这让模板更灵活，不推荐。<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>

//x-template：
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})

Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
... a lot of static content ...\
</div>\
'
})