父子组件之间传递数据
$attrs
包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
父组件向子组件传递值
父组件通过props向下传递数据给子组件。注:组件中的数据共有三种形式:data、props、computed
子组件向父组件传值(通过事件形式)
当我们点击“Vue.js Demo”后,子组件向父组件传递值,文字由原来的“传递的是一个值”变成“子向父组件传值”,实现子组件向父组件值的传递
父组件中v-on监听的事件的标签和自定义事件保持一致,都是titleChanged
父组件中的监听事件也可以写成
v-on: titleChanged
@titleChanged
$t的用法
this用法
在浏览器中,全局对象是window
普通函数在全局或其他函数内被调用,this指向调用者
Foo()方法中有使用this
created方法用法
所有的方法都应该在methods里定义,然后在created或者mounted里 使用this调用方法,用这种方式实现初始化
created在模板渲染成html,或者模板编译进入路由之前,调用
在页面渲染之前通常是初始化页面数据等
mount中方法用法
已完成模板已经渲染或el对应html渲染后调用,有些页面渲染逻辑需要在页面渲染之后,做一些逻辑操作
Render
Computed
这两种方法的区别:
Computed计算属性,Vue会记住计算的属性所依赖的值(在我们这个示例中,那就是 results )。通过这样做,Vue只有在依赖变化时才可以计算值。否则,将返回以前缓存的值。这也意味着 只要 results 还没有发生改变,多次访问 totalMarks 计算属性会立即返回之前的计算结果,而不必再次执行函数。
Method中的方法, totalMarks() 方法在每次页面渲染时都被执行一次
在Vue中 计算属性是基于它们的依赖进行缓存的,而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。
Watch
Vue确实提供了一种更通用的方式来观察和响应Vue实例上的数据变动: watch 属性 。
当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch 。然而,通常更好的想法是使用计算属性而不是命令式的 watch 回调
Immediate表示在初始化数据的时候,就开始监听,如果是false,在赋值后,修改的时候开始监听
Deep:监听对象,如果没有特殊设置,监听对象的每一个属性
beforeRouteEnter
页面前后跳转回退逻辑:
Next后面的箭头函数在mounted函数执行完之后执行
$dialog
$refs
通过$refs获取对应的dom元素的value值
$router.push
$totast
Vant