实现子组件与父组件双向绑定的.sync修饰符
首先 缕清思路
子组件想要修改父组件的值 父组件需要先传递数据给子组件，子组件接收后$emit触发父组件中的函数 才能修改父组件中的值
下面是简写代码块实例
//父组件
<div>
<son :title="title" @changeTitle='dotitle'></son>
//<son :title.sync=title></son> .sync其实是上面一句代码的语法糖（简写形式） 此时不用定义函数了
</div>
data(){
return{
title: 标题111
}
},
methods: {
dotitle(titleValue){
this.title=titleValue
}
}
//子组件
<div>{{title}}</div>
<button @click='change'></button>
props: {
title: String
},
methods: {
change(){
this.$emit('changeTitle','标题222')
//this.$emit('update:title','标题222') uptade: [prop -name] 是固定写法
}
}
作用 : 对传递给子组件的 prop 数据进行“双向绑定”。（正常情况下，prop 的数据都是单向数据流）
其次,当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。
inheritAttrs和attrs
应用 场景： 父组件需要传递数据给子组件 子组件还要将这个数据传递给它的子组件
//父组件
<div>
<child :text="text"></child>
</div>
//子组件
<div>
<my-child :text="text"></my-child>
</div>
//子组件的子组件
<div>
<div>{{text}}</div>
</div>
可以使用vuex来解决 但是不复杂的项目引用vuex实际没必要
//父组件
<template>
<div>
<child :text="text" :count="count"></child>
</div>
</template>
<script>
export default{
data(){
return {
text:"父组件的值"，
count:123456，
}
}
}
</script>
//子组件
<template>
<div>{{text}}</div> //但是能够看到count
</template>
<script>
export default{
props:["text"]
}
</script>
可以通过设置inheritAttrs: false来取消这种默认行为
data(){
return{
......
}
}
inheritAttrs: false, //取消这种默认行为
mounted(){
console.log(this.$attrs); //{count:123456}
}
<template>
<div class="child">
<my-child v-bind="$attrs"></my-child>
</div>
</template>
子组件的子组件也可以获取这个值了
自定义指令
对普通 DOM 元素进行操作
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
//局部
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
<input v-focus> //input输入框自动选中
自定义插件
1.插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等，对于插件只要在最开始引入一次，在任何组件就可以直接使用
2.Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
3.通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.
这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。
最会导出此插件对象以供别人使用，如下所示
//所谓vue的插件，就是一个js对象
let myplugin={
install:function(Vue,Options){
//在这里写插件需要实现的功能
}
}
export default myplugin;
element-ul是一个插件库 安装完成后 一键use就有了各种组件
(function () {
const MyPlugin = {} //声明一个插件对象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
alert("添加全局方法或属性")
}
// 2. 添加全局资源
Vue.directive('my-directive', {
inserted: function (el, binding) {
el.innerHTML = binding.value
}
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
})
//这个混入是全局的
//全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例
//当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
// 4. 添加实例方法，可以传参
Vue.prototype.$myMethod = function () {
alert('添加实例方法')
}
}
// 将插件添加到 window 对象中
window.MyPlugin = MyPlugin
})()
混入
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
//这个混入是局部的 不会影响别的组件
混入差不多就是混合的意思 使用 mixins: [混入名],就将两者混合在一起，在发生冲突时以组件数据优先 比如此例中以组件本身的data为主
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
this.$options
获取本页面和name ,data 同级的自定义属性
箭头函数的this指向问题
箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)。
这是一个非箭头函数
这里的this指向的是window对象，这是由于setInterval跟setTimeout调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。
做一个修改
将this存为一个变量，此时的this指向Person1，也可以使用bind函数来绑定this实现以下效果
参考链接
修改setInterval和setTimeout中的this指向全局的问题
1.使用箭头函数 函数里面的设置延迟中的this就指向这个函数了 而不是window
2.在函数里面定义var that =this 在延迟函数里面直接使用that
3.使用bind（）当被绑定函数执行时，bind方法会创建一个新函数，并将第一个参数作为新函数运行时的this。在这个例子中，在调用setTimeout中的函数时，bind方法创建了一个新的函数，并将this传进新的函数
如有错误 欢迎指正! 感谢
