“这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战”
1，is
用于动态组件且基于 DOM 内模板的限制来工作
**
<!-- 当 `currentView` 改变时，组件也跟着改变 -->
<component v-bind:is="currentView"></component>
2， ref
ref : 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
如果用在子组件上，引用就指向组件实例
**
<p ref="p">hello</p>
<child-component ref="child"></child-component>
**
// 在 js 中，要获取的元素使用方法
this.$refs.child
注： ref 本身是基于渲染结果被创建的，在初始渲染的时候，不能访问它们，因为它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定
3， $attrs 传值
1，什么情况下用$attrs 来传值
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件（在创建高级别的组件时非常有用）。
2，用法
- 配置文件
样式代码就不展示了
**
src
component // 组件
attrsFather.vue
attrsChild.vue
view
attrs.vue // 展示文件
- attrs 页面内容
这里通过组件 :modelType="modelType" 绑定值，子组件不需要通过props来接受值
但是要传值的话，必须要一层一层绑定值来传递，如果不绑定，则停止传值
**
<template>
<div class="hello" :modelType="modelType">
<div class="mg-b20">我是 attrs 页面</div>
<input type="text" v-model="value" @change="pull(value)"/>
<!--这里是通过:modelType="modelType" 来绑定值 -->
<attrsFather :modelType="modelType"></attrsFather>
</div>
</template>
<script>
import attrsFather from "@/component/attrsFather.vue";
export default {
name: "attrs",
components: {
attrsFather
},
data() {
return {
value:'',
modelType:[]
};
},
methods:{
pull(value){
this.modelType.push(value)
}
}
};
</script>
- attrsFather 页面内容
**
<template>
<div class="hello">
<div>我是 attrsFather 页面</div>
<div class="ly">
<button @click="getValue">获取attrs页面的值</button>
<div>attrs：{{attrsValue}}</div>
</div>
<!-- 文件中，通过attrsValue接收modelType值，继续绑定，才能传到下一个子组件中 -->
<attrsChild :attrsValue="attrsValue"></attrsChild>
</div>
</template>
<script>
import attrsChild from "@/component/attrsChild.vue";
export default {
name: "attrsFather",
components: {
attrsChild
},
data() {
return {
attrsValue: []
};
},
methods: {
getValue() {
this.attrsValue = this.$attrs.modelType;
}
}
};
</script>
- attrsChild 页面内容
**
<template>
<div class="child">
<div>我是 attrsChild 页面</div>
<div class="ly">
<button @click="getValue">获取attrs页面的值</button>
<div style="margin-left:20px;">attrs：{{attrsValue}}</div>
</div>
</div>
</template>
<script>
export default {
name: "attrsChild",
data() {
return {
attrsValue:[]
};
},
methods: {
getValue() {
this.attrsValue = this.$attrs.attrsValue;
}
}
};
</script>
git.gif
4，$nextTick
1，$nextTick方法作用
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
2，语法：Vue.nextTick([callback, context])
参数：
callback：是函数；回调函数，不传时提供promise调用
context：是对象；回调函数执行的上下文环境，不传默认是自动绑定到调用它的实例上。
3，dome
**
<div>
<div>$nextTick学习</div>
<button v-if="showState" @click="changeState()">点击展示input框</button>
<input type="text" ref="inputShow" v-else />
</div>
**
changeState() {
this.showState = false;
this.$refs.inputShow.focus();
}
当写完之后，我们操作页面，会显示报错
\
git.gif
这个是为什么呢？
因为当this.showState = false时，页面需要重新渲染页面，但是 this.$refs.inputShow.focus()不等页面渲染完成之后，就开始执行了，但是此时页面还是旧的页面，新页面还未渲染，所以就会报错**Cannot read property 'focus' of undefined**
所以我们要把 this.$refs.inputShow.focus()操作延迟，延迟到新页面dome渲染成功后，再执行此操作，$nextTick就是这么一个操作，所以，我们要进行修改为
**
changeState() {
this.showState = false;
// 当组件根据最新的data数据重新渲染完成之后，再执行函数中的操作
this.$nextTick(function() {
this.$refs.inputShow.focus();
});
}
git.gif
5，$set
1，场景：vue数据修改可以进行视图更新
在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
2，场景：vue数据修改可以进行视图不更新
- 为什么？
受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。 - 解决方法：用 $set 方法，新添加的属性值会被Vue监听到并且同步渲染到页面上
**
//渲染数据时，数值改变了，但是视图没有更新
arr[index] = newVal ；
//因为vue无法监听到复杂数据内部数值变化，
//使用 vm.$set实例方法，这也是全局 Vue.set方法的别名，$set可以触发更新视图：
this.$set( target, key, value )；
Vue.set( target, key, value )； //通过Vue.set方法，$set可以触发更新视图
注：调用方法：Vue.set( target, key, value )；
target：要更改的数据源(可以是对象或者数组)；
key：要更改的具体数据；
value ：重新赋的值；
