关于vue2.x的一些问题理解

目录

• 1、data()方法
• 2、数据流的双向绑定与单项绑定
• 3、keep-alive标签
• 4、router-view标签
• 5、组件中方法中的this指向的是当前组件的顶级(根)元素(重要)
• 6、this.$refs.属性名(元素定义的ref="属性名")
• 7、this.$emit('事件字符串')
• 8、this.$nextTick

1、data()方法

vue在渲染组件的时候会自动调用这个方法，方法返回的数据渲染到dom上

2、数据流的双向绑定与单项绑定

表单输入框都是双向绑定:model="属性"获取用户的输入
父组件向子组件单向传递数据流的时候是:属性="属性"

3、keep-alive标签

能够在发生路由切换的时候能够保持保持表单数据的输入状态

4、router-view标签

在发生路由跳转时，会在当前模块的router-view标签处展示目标路由组件的内容

5、组件中方法中的this指向的是当前组件的顶级(根)元素(重要)

6、this.$refs.属性名(元素定义的ref="属性名")

不能跨组件，类似于给组件的某一个元素起一个唯一的名字，在方法中通过this.$refs.属性名能够快速的拿到这个元素

7、this.$emit('事件字符串')

子组件调用父组件的方法，并向父组件传递数据

// 父组件
@parent相当于是自定义的事件，子组件通过字符串触发这个事件
<Content @parent="test"></Content>
test(data){
  console.log(data)
}

// 子组件
<el-button @click="childMethod">测试emit</el-button>
childMethod() {
  let a = 1;
  this.$emit('parent',a)
}

8、this.$nextTick

其用于数据渲染之后执行。
比如：
　　修改了某个数据，这个数据需要 dom 更新之后才会显示出来，此时就可以使用 this.$nextTick。其传递一个回调函数，在数据渲染之后执行。
https://www.cnblogs.com/l-y-h/p/12935300.html#_label0