Logo Zephyrnet

Hướng dẫn về Đạo cụ Vue

Ngày:

Giới thiệu

quang cảnh là một khung JavaScript cho phép các nhà phát triển tạo các thành phần được sử dụng để chia giao diện người dùng thành các phần nhỏ hơn, thay vì xây dựng toàn bộ giao diện người dùng trong một tệp duy nhất. Khi sử dụng các thành phần, chúng ta có thể muốn truyền dữ liệu từ thành phần mẹ sang thành phần con tại một số điểm, điều này thường được thực hiện với tài sản, còn được biết là đạo cụ.

Trong hướng dẫn này, chúng ta sẽ đi sâu vào các đạo cụ, chúng ta sẽ xem xét cách thức hoạt động của các đạo cụ, các loại giá đỡ khác nhau, cách chuyển các dạng dữ liệu khác nhau và nhiều hơn thế nữa.

Đạo cụ là gì?

đạo cụ có thể là một khái niệm quan trọng cần hiểu khi làm việc với các thành phần trong Vue. Props, viết tắt của tài sản, cho phép chúng tôi truyền dữ liệu và chức năng từ thành phần này sang thành phần khác. Điều quan trọng là phải hiểu rằng luồng dữ liệu đạo cụ là một hướng - chúng ta chỉ có thể truyền dữ liệu từ thành phần mẹ sang thành phần con chứ không phải theo cách khác.

Lưu ý: Đạo cụ là chỉ đọc, có nghĩa là thành phần con không thể sửa đổi chúng vì dữ liệu thuộc sở hữu của thành phần mẹ và chỉ được truyền cho thành phần con để đọc nó.

Khai báo Đạo cụ trong Vue

Đăng ký đạo cụ rất đơn giản; tất cả những gì chúng ta phải làm là thêm nó vào props mảng trong <scripts> nhãn. Sau đó, chúng tôi có thể sử dụng nó trong ứng dụng của chúng tôi <template> tiết diện. Điều này xảy ra trong thành phần con, nơi dữ liệu được nhận từ thành phần mẹ:

<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

Đây là Thành phần tệp đơn cú pháp. Ngoài ra, bạn có thể đăng ký đạo cụ cho một thành phần cụ thể thông qua:

Vue.component('user-profile', {
  props: ['name'],
  template: '<p>My name is {{ name }}</p>'
});

Khai báo nhiều đạo cụ trong Vue

props là một mảng - bạn có thể thêm bao nhiêu tùy thích:

<template>
  <p>My name is {{ name }} and I am {{ age }} years.</p>
</template>

<script>
export default {
  props: [
    'name',
    'age'
  ],
}
</script>

Các loại giá trị đạo cụ

Cho đến nay, chúng ta chỉ truyền các giá trị chuỗi, nhưng trên thực tế, bất kỳ kiểu dữ liệu nào cũng có thể được truyền dưới dạng một giá trị - bao gồm số, đối tượng, mảng, Boolean, phương thức, ngày tháng, v.v.

Lưu ý: Khi chúng ta sử dụng một phương thức tĩnh để chuyển một số, đối tượng, mảng và giá trị boolean, chúng ta phải ràng buộc chúng để nói với Vue rằng đây là một biểu thức JavaScript chứ không phải là một chuỗi (khớp với tên của phương thức).

Vì vậy, để vượt qua chúng, chúng tôi vượt qua chúng như một Biểu thức JavaScript (được đặt trong dấu ngoặc kép), được đánh giá đúng kiểu dữ liệu ngầm hiểu:

<template>
  <UserProfile :age="22" />
  <UserProfile :married="false" />
  <UserProfile :hobbies="['Singing', 'Gaming', 'Reading']" />
  <UserProfile
    :name="{
      firstName: 'John',
      lastName: 'Doe'
    }"
    />
</template>

Tuy nhiên, chuyển đổi ngầm không phải là không có lỗi trong cài đặt thực tế. Trong hầu hết các trường hợp - bạn sẽ muốn chỉ định các loại một cách rõ ràng.

Chỉ định rõ ràng các loại đạo cụ

Biết rằng chúng ta có thể chuyển bất kỳ loại dữ liệu nào làm phương thức hỗ trợ, phương pháp hay nhất là chỉ định loại phương thức hỗ trợ mà chúng ta muốn sử dụng bằng cách khai báo chúng như một phần của vật chứ không phải là một mảng và để chỉ định rõ ràng kiểu của giá trị đó. Điều này rất hữu ích vì Vue sẽ gửi một cảnh báo cảnh báo (trong chế độ phát triển) đến bảng điều khiển nếu loại dữ liệu được truyền vào không khớp với loại hỗ trợ được chỉ định:

<template>
  <p>My name is {{ name }} and I am {{ age }} years.</p>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number,
  }
}
</script>

Chuyển đạo cụ vào các thành phần

Truyền đạo cụ vào các thành phần trong Vue tương tự như chuyển các thuộc tính HTML vào các thẻ HTML và điều này có thể chấp nhận tất cả các loại dữ liệu, bao gồm cả các phương thức. Ví dụ: nếu chúng ta có một thành phần hồ sơ và muốn chuyển thông tin chi tiết của người dùng vào thành phần người dùng, chúng ta có thể làm như sau:

<template>
  <UserProfile
        v-bind:name="user.name"
        :img="user.image"
  />
</template>

Đạo cụ tĩnh và động

Đạo cụ có thể được chuyển theo một trong hai cách: dưới dạng giá trị tĩnh hoặc giá trị động. Theo tĩnh, chúng tôi có nghĩa là các giá trị này được truyền trực tiếp vào thành phần mà không cần v-bind or : (dấu chấm phẩy):

<template>
  <UserProfile name="John Doe" />
</template>

Trong khi đối với các giá trị động, chúng tôi sử dụng v-bind hay của nó : đường tắt:

<template>
  <UserProfile :name=name />
</template>

<script>
export default {

  data() {
    return {
      name: 'John Doe'
    }
  },

}
</script>

Các giá trị động có thể được kế thừa từ data() tùy chọn của tập lệnh thành phần của chúng tôi.

Truyền đạo cụ với các nhà khai thác bậc ba

Thông thường, chúng tôi muốn chuyển các dữ liệu khác nhau dựa trên giá trị của một điều kiện. Trong trường hợp đó, toán tử bậc ba rất hữu ích, vì chúng ta có thể sử dụng nó bên trong một giá trị chống đỡ:

<template>
  <div id="app">
    <Home :title="isHomepage? 'Welcome to the homepage' : 'This is not the Homepage'" />
  </div>
</template>

<script>
import Home from './components/Home'
export default {

  data(){
    return{
      isHomepage: true,
    }
  },
  components: {
    Home
  }
}
</script>

Trong ví dụ này, chúng tôi đã kiểm tra loggedIn giá trị - vì nó là true (người dùng đã đăng nhập) giá trị hỗ trợ kết quả sẽ là Log Out.

Truyền phương thức làm đạo cụ

Cũng có thể truyền các phương thức dưới dạng đạo cụ xuống thành phần con, hoạt động tương tự như truyền các kiểu dữ liệu khác:

<template>
  <ChildComponent :method="myFunction" />
</template>

<script>
export default {

  methods: {
    myFunction() {

    }
  }
};
</script>

Làm việc với Đạo cụ

Như đã nói trước đây, mục tiêu chính của việc sử dụng đạo cụ là truyền dữ liệu. Giả sử chúng tôi đang xây dựng một ứng dụng sẽ hiển thị thông tin chi tiết của người dùng - chúng tôi sẽ thích tạo các thành phần có thể sử dụng lại để chúng tôi có thể chuyển những dữ liệu này làm đạo cụ, thay vì tạo thành phần riêng biệt cho từng người dùng theo cách thủ công. Hãy tạo một thành phần mẹ cho ứng dụng đó:

<template>
  <div id="app">
    <UserProfile :name='userName' age='22' />
    <UserProfile :name='userName' age='18' />
    <UserProfile :name='userName' age='27' />
  </div>
</template>

<script>
import UserProfile from './components/UserProfile'

export default {

  data(){
    return{
      userName:"John Doe",
    }
  },
  components: {
    UserProfile
  }
}
</script>

Và đây là thành phần con sẽ trông như thế nào:

Xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Dừng lệnh Googling Git và thực sự học nó!

<template>
  <div>
    <h2>My name is {{name}} and I am {{age}} years old.</h2>
  </div>
</template>

<script>
export default {

  props:{
    name:String,
    age:Number,
  }
}
</script>

Xác thực Đạo cụ

Trước đây, chúng tôi đã thấy rằng việc thêm các loại phần mềm hỗ trợ giúp kiểm tra loại dữ liệu được các đạo cụ trả về, đây là một cách để xác thực các đạo cụ, nhưng chúng tôi cũng có thể thêm khóa bắt buộc và giá trị của nó vào phần hỗ trợ, như được hiển thị bên dưới:

props: {
  name: {
    type: String,
    required: true
  }
}

Đặt giá trị đề xuất mặc định

Trong một số trường hợp, chúng tôi có thể muốn đặt các giá trị mặc định để nếu thành phần con không thể lấy dữ liệu từ thành phần mẹ, thì dữ liệu đó có thể được hiển thị:

props: {
  studentUserName: {
    type: String,
    required: true,
    default: "student##"
  },
  studentPassword: {
    type: String,
    required: true,
    default: "password123"
  },
  userImg: {
    type: String,
    default: "../default-avatar.jpg"
  },
},

Lưu ý: Giá trị mặc định cũng có thể là một đối tượng hoặc một phương thức trả về giá trị.

Kết luận

Đạo cụ là một phần quan trọng của Vue khi sử dụng các thành phần. Trong bài viết này, chúng ta đã xem xét các đạo cụ là gì, cách sử dụng chúng trong Vue, cách khai báo và đăng ký chúng, đặt giá trị mặc định, xác thực chúng, v.v.

tại chỗ_img

Tin tức mới nhất

tại chỗ_img