vue构造函数(根实例化时和组件实例对象选项)参数:选项详解

实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他

数据

data

属性能够响应数据变化,当这些数据改变时,视图会进行重渲染。

访问方式:

1、通过 vm.$data 访问。

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
}) vm.$data === data// => true
vm.$el === document.getElementById('example') // => true

2、Vue 实例代理(以 _$ 开头的属性 不会 被 Vue 实例代理)了 data 对象上所有的属性。

// 我们的数据对象
var data = { a: 1 } // 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
}) // 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

在组件中:

1、data 必须为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过函数的return,每次返回的是不同的对象。

2、每次创建一个新实例后,调用 data 函数会返回初始数据的一个全新副本数据对象。

拷贝原始数据对象:

vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

注意:

1、data作为函数时如果使用了箭头函数,则 this 不会指向这个组件的实例,函数的第一个参数将是实例。

data: vm => ({ a: vm.myProp })

2、只有当实例被创建时 data 中存在的属性才是响应式的。

3、使用Object.freeze()对data对象属性冻结,data不再是响应式。

使用建议:

1、推荐在创建实例之前,就声明所有的根级响应式属性。

2、后续才需要的某个属性,但是一开始它为空或不存,设置一些初始值,保证它是响应式的。

props

可以是数组或对象,用于接收来自父组件的数据,定义了当前组件有哪些可配置的属性。

当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。

<script>
var obj = {
props:{
parentDataA:Number
},
mounted(){
console.log(this.parentDataA);
}
};
export default obj;
</script>

使用建议:

(1)写通用组件时,props最好用对象的写法,针对每个属性设置类型、默认值或自定义校验属性的值,是组件比较严谨。当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。

//类型检测String、Number、Boolean、Array、Object、Date、Function、Symbol
Vue.component('my-component', {
props: {
propA: Number,// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propB: [String, Number], // 多个可能的类型
propC: {// 必填的字符串
type: String,
required: true
},
propD: { // 带有默认值的数字
type: Number,
default: 100
},
propE: {// 带有默认值的对象
type: Object,
default: function () {// 对象或数组默认值必须从一个工厂函数获取
return { message: 'hello' }
}
},
propF: { // 自定义验证函数
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})

(2)在dom中,使用短横线分隔命名,在js中使用时是驼峰命名。

(3)是单向数据流,不应该在子组件中更改prop,会报错。可以在data中定义或者在computed中定义对应的属性。注意:对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。

4)prop 会在一个组件实例创建之前进行验证,所以实例的属性 (如 datacomputed 等) 在 defaultvalidator 函数中是不可用的。

propsData

只用于 new 的实例中,用在全局扩展(extend)时进行传递数据。在实例化extend的构造器时,传入属性必须是propsData、而不是props哦。实例中props接收propsData,把props的数据作为测试数据。

不推荐用全局扩展的方式作自定义标签,完全可以使用组件来做,propsData在实际开发中我们使用的并不多。另外的例子,可以见全局API中的extend部分。

var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
}) var vm = new Comp({
propsData: {
msg: 'hello'
}
})

computed

计算实例的属性,this 上下文自动地绑定为 Vue 实例。箭头函数this不会指向实例,需要显示传入vm。

computed: {
aDouble: vm => vm.a * 2
}

计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。

var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})

计算属性默认只有 getter ,想改变实例属性,可以提供一个 setter。在getter中改变实例属性,eslint开启的情况下会报错。

使用建议:

1、在get中,不要改变实例属性,而是通过set来改变。

2、计算属性依赖响应式属性,注意它的使用场合和methods以及watch区分。

methods

可通过实例访问这些方法或在指令表达式或在模板插值中使用。方法中的 this 自动绑定为 Vue 实例。

注意,不应该使用箭头函数来定义 method 函数this 不会指向 Vue 实例。

常用姿势:

methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
},
say(str,event){
//...
},
console(){
//...
}
}
//直接调用或者传参调用,都有event传入
<button v-on:click="greet">Greet</button>
<button v-on:click="greet($event)">Greet</button> //多个参数时,event事件要显示传入
<button v-on:click="say('what',$event)">Say what</button> //由实例代理,直接被调用
vm.console()//

事件修饰符

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。

因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!--2.1.4 新增 点击事件将只会触发一次 ,还能被用到自定义的组件事件上-->
<a v-on:click.once="doThis"></a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<!--这个 .passive 修饰符尤其能够提升移动端的性能 -->
<!--不要把 .passive 和 .prevent 一起使用-->
<div v-on:scroll.passive="onScroll">...</div>

使用建议:

一般使用在事件上面,大部分时候可以使用computed代替methods和watch。

watch

key为要观察的表达式,值为对应的回调函数,当表达式的值改变,就触发回调。

回调函数可以是方法名(字符串形式),方法,或者包含配置选项的对象。

注意:Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性,此时要是设置了immediate为true,其handle会立即被调用。

watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
b: 'someMethod', // 方法名
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true // 深度 watcher,当监听的是一个对象的时候,指定deep: true可监听对象内部值的变化 },
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true // 该回调将会在侦听开始之后立即以表达式的当前值触发回调
},
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}

更复杂的表达式可以使用vm.$watch处理,用一个函数取代,回调函数参数为新值和旧值。

(在变异 (不是替换) 对象或数组时,旧值与新值相同,指向同一个引用)

// 函数
vm.$watch(
function () {
// 表达式 `this.a + this.b` 每次得出一个不同的结果时
// 处理函数都会被调用。
// 这就像监听一个未被定义的计算属性
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
}
)

vm.$watch 返回一个取消观察函数,用来停止触发回调:

var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

computed,methods,watch的使用场景

1、大部分时候都使用computed

 data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
} computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

2、一般在事件里调用methods

3、当需要在数据变化时执行异步或开销较大的操作时,使用watch。

Dom

el

只在 new 实例时传入,不在组件中使用。值为页面上已存在的 DOM 元素,作为 Vue 实例的挂载目标。

可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

template

字符串模板

如果值以 # 开始,则它将被用作选择符,并使用匹配元素的 innerHTML 作为模板。

<template id="myComponent">
<div>This is a component!</div>
</template>
Vue.component('my-component',{
template: '#myComponent'
})

如果为标签字符串,模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

new Vue({
el: '#app',
components:{App},
template: '<App/>'
})

这里面涉及到一个简写的处理,如果你不在组件上面添加属性或者指令的话,你就可以写成单标签的形式 <App/>其实就是 ‘ <App><App/>’

el: '#app' 是index.html 的<div id="app"></div>

App.vue 的<div id="app">xxxxxxxx</div> 会替换index中的<div id="app"></div> 。

components 是声明有哪些组件,可以放多个组件对象,比如:components:{App,App2,App3}

template 是使用哪个组件,如果想用App2,则需要设置template: '<App2/>'。

render函数

字符串模板(template)的代替方案,多用于动态生成dom的场景,允许你发挥 JavaScript 最大的编程能力。

createElement 方法作为第一个参数用来创建 VNode

比如:某个组件,通过level这个prop来控制模板里内容的生成

<anchored-heading :level="1">Hello world!</anchored-heading>

使用template写法:

<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
......4,5,6...
</script>

使用render:

Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子元素数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})

vm.$slots查阅博文:slot

createElement函数(可以理解为document.createElement,只是参数不同而已),用于生成“虚拟节点 (Virtual Node)”,也常简写它为“VNode”。

函数接收三个参数:
参数一: {String | Object | Function}, HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。必需参数。
参数二:包含模板相关属性的数据对象,可以在 template 中使用这些特性。可选参数。
参数三:{String | Array},子虚拟节点 (VNodes),也可以使用字符串来生成“文本虚拟节点”。可选参数。

[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]

使用render的常用姿势:

1、除了代替上面的v-if和v-for功能(即不要把渲染逻辑写在模板里)

<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p> //使用render
props: ['items'],
render: function (createElement) {
if (this.items.length) {
return createElement('ul', this.items.map(function (item) {
return createElement('li', item.name)
}))
} else {
return createElement('p', 'No items found.')
}
}

2、还能通过数据对象实现v-model:

props: ['value'],
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.$emit('input', event.target.value)
}
}
})
}

3、使用render 函数渲染多次重复的元素/组件 。下例渲染了 20 个相同的段落:

render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}

renderError函数

只在开发者环境下工作,当 render 函数遭遇错误时,其错误将会作为renderError函数的第二个参数。这个功能配合 hot-reload 非常实用。

new Vue({
render (h) {
throw new Error('oops')
},
renderError (h, err) {
return h('pre', { style: { color: 'red' }}, err.stack)
}
}).$mount('#app')

生命周期钩子函数

一共十一个函数。

一般实例里有的生命周期钩子函数:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed,errorCaptured

beforecreated:el 和 data (即实例的属性)并未初始化
created:完成了 data 等属性的初始化(数据观测 (data observer),属性和方法的运算,watch/event 事件回调),el没有。
beforeMount:完成了 el 和 data 初始化 ,相关的 render 函数首次被调用。
mounted :完成挂载,把值渲染进el里。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

beforeUpdate:指view层的数据变化前,不是data中的数据改变前触发。适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

updated:组件 DOM 已经更新,可以执行依赖于 DOM 的操作。如果要相应状态改变,通常使用计算属性watcher 取代updated。

destroyed:Vue 实例销毁后调用。可以这么理解,执行了destroy操作,后续就不再受vue控制了。

errorCaptured:当捕获一个来自子孙组件的错误时被调用。

activated与deactivated:

在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子: activated 与 deactivated。

activated在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用。

使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了,再次进入缓存路由/组件时,不会触发这些钩子:

beforeCreate ,created ,beforeMount, mounted

生命周期钩子注意的点:

1、ajax请求最好放在created里面,因为此时已经可以访问this了,请求到数据就可以直接放在data里面。 
2、关于dom的操作要放在mounted里面,在mounted前面访问dom会是undefined。
3、每次进入/离开组件都要做一些事情,用什么钩子:

(1)不缓存:
进入的时候可以用created和mounted钩子,离开的时候用beforeDestory和destroyed钩子,beforeDestory可以访问this,destroyed不可以访问this。
(2)缓存了组件:
缓存了组件之后,再次进入组件不会触发beforeCreate、created 、beforeMount、 mounted,如果你想每次进入组件都做一些事情的话,你可以放在activated进入缓存组件的钩子中。
同理:离开缓存组件的时候,beforeDestroy和destroyed并不会触发,可以使用deactivated离开缓存组件的钩子来代替。

将路由导航、keep-alive、和组件生命周期钩子结合起来的触发顺序:

假设是从a组件离开,第一次进入b组件:

1- beforeRouteLeave:路由组件的组件离开路由前钩子,可取消路由离开。
2- beforeEach: 路由全局前置守卫,可用于登录验证、全局路由loading等。
3- beforeEnter: 路由独享守卫
4- beforeRouteEnter: 路由组件的组件进入路由前钩子。
5- beforeResolve:路由全局解析守卫
6- afterEach:路由全局后置钩子
7- beforeCreate:组件生命周期,不能访问this。
8- created:组件生命周期,可以访问this,不能访问dom。
9- beforeMount:组件生命周期
10- deactivated: 离开缓存组件a,或者触发a的beforeDestroy和destroyed组件销毁钩子。
11- mounted:访问/操作dom。
12- activated:进入缓存组件,进入a的嵌套子组件(如果有的话)。
13- 执行beforeRouteEnter回调函数next。

资源

directives函数自定义指令

分为全局和局部自定义指令:

//全局
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
}) //局部,组件中定义一个 directives 的选项
directives: {
focus: {// 指令的定义
inserted: function (el) {//指令的钩子函数
el.focus()
}
}
}

自定义指令对象(比如focus这个对象)的钩子函数:

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind:只调用一次,指令与元素解绑时调用。

 钩子函数参数: el、bindingvnodeoldVnode。

el:指令所绑定的元素,可以用来直接操作 DOM 。

binding:对象,有以下属性:

  • name:指令名,不包括 v- 前缀。
  • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
  • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
  • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
  • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
  • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }

vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

钩子函数简写:

bindupdate 时触发相同行为,而不关心其它的钩子,directive第二个参数是函数而不是对象。

Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})

指令函数能够接受所有合法的 JavaScript 表达式,比如binding.value可以是一个对象字面量:

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})

使用姿势:

注册局部指令比较多,一般在组件中用来初始化dom。

filters过滤器

分为全局和局部过滤器。

使用场景:用于一些常见的文本格式化(日期格式化,字符转换,金额处理,input输入处理等)

注意:

1、过滤器内是没有this引用的,过滤器内的this是undefined,所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。

2、过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。

3、可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突

4、全局定义过滤器,在创建 Vue 实例之前

5、直接注册在Vue全局上面,其他不用这个过滤器的实例也会*接受,所以要注意区分哪些注册在全局,哪些注册为局部

用法:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持),被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

<!-- 在双花括号中,capitalize过滤器函数将会收到 message 的值作为第一个参数-->
{{ message | capitalize }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div> <!-- 过滤器可以串联 ,filterA 的结果传递到 filterB 中-->
{{ message | filterA | filterB }} <!-- 过滤器是 JavaScript 函数,因此可以接收参数,message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。-->
{{ message | filterA('arg1', arg2) }}

局部(本地)过滤器:在一个组件的选项中定义本地的过滤器

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

在创建 Vue 实例之前全局定义过滤器:

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}) new Vue({
// ...
})

用户从input输入的数据在回传到model之前也可以先处理

<input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->

 Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
}); var myVue = new Vue({
el: ".test",
data: {
message:12
}
});

components组件列表

页面需要用到的组件列表,书写形式如下。

//引入组件
import HelloWorld from "./components/HelloWorld";
//在页面实例注入组件
components: {
HelloWorld
},
//在页面使用组件
<HelloWorld />
或者
<HelloWorld><HelloWorld />

参考博文:vue学习之组件

$slots

查阅博文slot

组合

parent指定父实例

值为父实例实例。parent指定实例的父实例,子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。

mixins

分为全局混入和局部混入。

值为成员是对象的数组,对象的key可以是任意的实例选项。可在多组件中复用某些功能。

// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
} // 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
}) var component = new Component() // => "hello from mixin!"

当组件和混入对象含有同名选项时,不同选项的混合规则:

(1)data

先与data的属性合并,发生冲突时以组件数据优先。

(2)生命周期钩子函数

将混合为一个数组,都将被调用,混入对象的钩子将在组件自身钩子之前调用。

(3)值为对象类型的选项,如methods, components 和directives

混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。

全局注册混入对象:

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
}) new Vue({
myOption: 'hello!'
})
// => "hello!"

注意使用! 一旦使用全局混入对象,将会影响到之后创建的所有 Vue 实例(包括第三方模板)。使用恰当时,可以为自定义对象注入处理逻辑。大多数情况下,只应当应用于自定义选项,就像上面示例一样。也可以将其用作 Plugins 以避免产生重复应用

extends

mixins 类似,用于扩展(混合)实例,区别大概就在于它是一个对象,mixins是个数组

let baseOptions= {
created(){
console.log('onCreated-1');
}
}; new Vue({
extends: baseOptions,
created(){
//do something
console.log('onCreated-2');
}
//其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

provide/inject

这对选项需要一起使用,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

provide 和 inject 绑定并不是可响应的,如果传入了一个可监听的对象,那么其对象的属性还是可响应的。

provide 选项:一个对象或返回一个对象的函数,指定想要提供给后代组件的数据/方法。

inject 选项:在任何后代组件里,使用 inject 选项来接收想要添加在这个实例上的属性。

inject 选项值:

  • 一个字符串数组
  • 一个对象,对象的 key 是本地的绑定名,value 是:
    • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
    • 一个对象,该对象的:
      • from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
      • default 属性是降级情况下使用的 value

使用场景:

  • 祖先组件不需要知道哪些后代组件使用它提供的属性
  • 后代组件不需要知道被注入的属性来自哪里(可以从多个祖先哪里获得)

栗子:

// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
} // 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
} //使用一个注入的值作为一个属性的默认值,Vue 2.2.1 或更高版本
const Child = {
inject: ['foo'],
props: {
bar: {
default () {
return this.foo
}
}
}
}
//使用一个注入的值作为数据入口,Vue 2.2.1 或更高版本
const Child = {
inject: ['foo'],
data () {
return {
bar: this.foo
}
}
} //在 2.5.0+ 的注入可以通过设置默认值使inject变成可选项,或从一个不同名字的属性注入
const Child = {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

选项的其他key

name

组件的选项,组件名

delimiters

Vue默认的插值是双大括号{{}},delimiters定义插值符号新的写法:

new Vue({
delimiters: ['${', '}']//插值形式就变成了${}。代替了{{ }}
})

functional

设置为 true 后,就可以让组件变为无状态、无实例的函数化组件。因为只是函数,所以渲染的开销相对来说较小,用一个简单的 render 函数返回虚拟节点使他们更容易渲染。

函数化的组件中的 Render 函数,提供了第二个参数 context 作为上下文,data、props、slots、children 以及 parent 都可以通过 context 来访问。

暂时没搞明白:

Vue学习笔记进阶篇——函数化组件

说说 Vue.js 中的 functional 函数化组件:很好的例子

应用场景

函数化组件不常用,它应该应用于以下场景:

  • 需要通过编程实现在多种组件中选择一种。
  • children、props 或者 data 在传递给子组件之前,处理它们。

model

见组件中的:v-model指令用在输入组件上和用直接用在input上的区别。

v-model 默认把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的,使用 model 选项来重新定义v-model的value和event

inheritAttrs

在使用自定义组件时,给组件设置一些非props的特性,默认会将这些特性帮到根元素上,通过设置inheritAttrs:false。可以禁止根元素继承这些特性,防止覆盖根元素已有特性。

$attrs存储非prop特性(除style和class外),在撰写基础组件的时候常会用到。

关于实例的目标挂载元素

如果在实例化时存在el选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount('#app') 手动开启编译。

render 函数若存在,则 Vue 构造函数不会从 template 选项或 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

如果 render 函数和 template 属性都不存在,挂载 DOM 元素的 HTML 会被提取出来用作模板,此时,必须使用 Runtime + Compiler 构建的 Vue 库。

new Vue({
el: '#app',
components:{App},
template: '<App/>'
})

实例能代理的属性

1、data的属性。

2、props的某个具值属性。

3、计算属性,某属性的get属性被 实例代理,输出get的返回值。

computed: {
add() {
return 2;
}
}
vm.add //

3、methods的方法

methods: {
get_num(num) {
vm.add_test1(num);
},
add_test1(num) {
//...
}
}
上一篇:Vue深度学习(6)- 组件


下一篇:VUE自学日志01-MVC和MVVM