2017-03-23 32 views
8

Tôi đang làm việc trên một phần phương thức sử dụng VueJS 2. Ngay bây giờ, nó về cơ bản hoạt động - Tôi nhấp chuột vào một nút và các phương thức mở vv

Những gì tôi muốn bây giờ là tạo một tên duy nhất cho phương thức và kết hợp nút với nút cụ thể đó.

Đây là những gì tôi có trong tâm trí. Các phương thức có một tài sản tên duy nhất:

<modal name='myName'>CONTENT</modal>

Và đây sẽ là nút sư:

<button @click="showModal('myName')"></button>

Những gì tôi cần phải tìm ra là làm thế nào để vượt qua các tham số của ShowModal đến thành phần phương thức.

Dưới đây là phương pháp mà tôi đang sử dụng trong trường hợp vue root (tức là, không phải bên trong phần phương thức của tôi):

methods: { 
    showModal(name) { this.bus.$emit('showModal'); }, 
} 

Những gì tôi muốn làm là truy cập vào các tài sản tên trong thành phần - - một cái gì đó như thế này:

created() { 
    this.bus.$on('showModal',() => alert(this.name)); 
} 

Nhưng điều này hiển thị là undefined.

Vì vậy, tôi đang làm gì sai? Làm cách nào để truy cập thuộc tính name bên trong thành phần phương thức?

LƯU Ý:. Nếu bạn đang tự hỏi những gì this.bus $ trên là, xin vui lòng xem câu trả lời sau đây để một câu hỏi trước đó tôi hỏi: https://stackoverflow.com/a/42983494/7477670

Trả lời

11

Vượt qua nó như một tham số để $emit.

methods: { 
    showModal(name) { this.bus.$emit('showModal', name); }, 
} 

created() { 
    this.bus.$on('showModal', (name) => alert(name)); 
} 

Ngoài ra, nếu bạn muốn đặt tên cho phương thức, bạn cần chấp nhận nó như một biện pháp chống đỡ trong thành phần phương thức.

Vue.component("modal",{ 
    props:["name"], 
    ... 
}) 

Sau đó, tôi giả sử bạn sẽ muốn làm một cái gì đó như thế nào,

if (name == this.name) 
    //show the modal 
Các vấn đề liên quan