Thêm xóa với $set và $delete

Một số phương pháp để có thể thêm và xóa các phần tử trong array và object

Array

add(newItem, index){this.array.splice(index,1, newItem)}// this.$set(array, indexOfItem, newValue)add(newItem, index){this.$set(this.array, index, newItem)}remove(index){this.array.splice(index,1)}// this.$delete(array, index)remove(index){this.$delete(this.todos, index)}

Object

add(key, value){this.object ={...this.object,{ key: value }}}// this.$set(object, propertyName, value)add(key, value){this.$set(this.object, key, value)}remove(key){deletethis.object[key]}// this.$delete(object, propertyName)remove(key){this.$delete(this.object, key)}

Cập nhật đồng bộ bằng $emit update

Cập nhật các prop của component cha một cách nhanh chóng từ component con

<dialog-component:visible.sync="isVisible"/>

// DialogComponenthandleClose(){this.$emit('update:visible',false)}

Được sử dụng cho các trường hợp đóng mở dialog nhanh chóng mà không cần truyền event lên component cha

Lưu ý khi dùng ở những chỗ khác cũng phải thêm .sync lúc truyền props để có thể sử dụng

Truy cập data của component cha bằng $parent

Phương pháp này giúp cho chúng ta có thể nhận được các data của component cha mà không cần truyền xuống prop

<p> {{ $parent.name }} </p>

Chỉ nên dùng khi component này không tái sử dụng

Xem console.log của event với $log

Tạo một vue prototype đặt tên là $log sau đó bind với console.log

Vue.prototype.$log = console.log.bind(console)

Và rồi chúng ta có thể sử dụng $log để kiểm tra console.log của các event trực tiếp trên template một cách nhanh chóng mà không cần tạo function

<input@keydown="$log"@keyup="$log"@keypress="$log"/>

Rerender lại component với key

Phương pháp này được sử dụng đối với nhưng trường hợp component không tự render lại khi dư liệu thay đổi

Hoặc với trường hợp dưới đây là 2 path dùng chung một component với dữ liệu khác nhau, khi chúng ta thay đổi path thì component không rerender lại

const routes =[{
    path:"/path1",
    component: ViewComponent,},{
    path:"/path2",
    component: ViewComponent,},];

Cách giải quyết là sử dụng key gán bằng $route.path, mỗi khi key là path thay đổi thì component sẽ rerender lại component

<router-view:key="$route.path"/>

Tùy biến v-model

<inputv-model="name"/>
// v-model ở phiên bản đầy đủ sẽ là như thế này
<input:value="name"@input="name = $event.target.value"/>

Nó có dạng

{ prop?: string, event?: string }

Với giá trị mặc định prop là value còn event là input

Nếu chúng ta có thể không muốn dùng các event, prop mặc định, thì hãy thêm một property cho component tên model

exportdefault{
  model:{
    prop:'name'
    event:'change',}}

Khi dùng nó sẽ có dạng thế này

<inputv-model="name"/>
// v-model ở phiên bản đầy đủ sẽ là như thế này
<input:name="name"@change="name = $event.target.value"/>

Sử dụng $on(‘hook:’) và @hook

Khi component trở nên lớn dần thì cách viết này có thể giúp chúng ta quan sát các sự kiện dễ dàng hơn

exportdefault{mounted(){
    window.addEventListener('resize',this.resizeHandler);this.$on("hook:beforeDestroy",()=>{
      window.removeEventListener('resize',this.resizeHandler);})},};

@hook có thể bắt được các lifecycle từ các component con

<child-comp@hook:mounted="someFunction"/>

Dùng immediate để kích hoạt watch ngay khi khởi tạo

exportdefault{
  watch:{
    title:{
      immediate:true,handler(newValue, oldValue){
        console.log(newValue);},},},};

Nhận tất các props và events với $props và $listeners

<child-comp v-bind="$props" v-on="$listeners"/>

Dynamic component và event

Component

<component:is="currentTabComponent"></component>

import ChildComponent from'./ChildComponent.vue/';this.currentTabComponent = ChildComponent;

Event

<button@[event]="test">Test</button>

this.event ='click';