new Vue({
el: '#app',
template: '<div>Hello DNT</div>'
}); new Vue({
el: '#app',
data() {
return {
blogTitle: 'DNT'
}
},
render: function (createElement) {
return createElement('h1', this.blogTitle)
}
}); Vue.component('child', {
template: '<div>Hello DNT users</div>'
}); Vue.component('child', {
props: ['text'],
template: `<div> {{ text }} </div>`
});
new Vue({
el: '#app',
data() {
return {
message: 'Hello DNT!'
}
}
}); <child :text="message"></child>
Vue.component('blogPost', {
props: {
post: {
type: Object,
required: true
}
},
template: `<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>`
}); [Vue warn]: Invalid prop: type check failed for prop "post". Expected Object, got String.
found in
---> <BlogPost>
<Root> Vue.component('blogPost', {
props: {
post: {
type: Object,
required: true,
validator: obj => {
const titleIsValid = typeof obj.title === 'string';
const bodyIsValid = typeof obj.body === 'string';
const isValid = titleIsValid && bodyIsValid;
if (!isValid) {
console.warn("prop is not valid");
return false;
}
return true;
}
}
},
template: `<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>`
}); Vue.component('blogPost', {
props: {
post: {
type: Object,
validator: obj => {
const titleIsValid = typeof obj.title === 'string';
const bodyIsValid = typeof obj.body === 'string';
const isValid = titleIsValid && bodyIsValid;
if (!isValid) {
console.warn("prop is not valid");
return false;
}
return true;
},
default: function() {
return {
title: 'Vue is fun!',
body: 'Vue is fun..................'
}
}
}
},
template: `<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>`
}); data: function () {
return {
stars: 5,
hover: 5
}
}, var dt = {
stars: 5,
hover: 5
};
Vue.component('blogPost', {
data: function() {
return dt;
},
props: // as before...,
template: `<div class="blog-post">
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
<div class="star-wrap">
<span v-for="n in 5"
class="star"
:class="{ full: hover >= n+1 }"
@click="stars = n+1"
@mouseover="hover = n+1"
@mouseout="hover = stars"
></span>
</div>
</div>`
});
برای رفع این مشکل کافی است به اینصورت دیتا را تعریف کنیم:
Vue.component('blogPost', {
data: function() {
return {
stars: 5,
hover: 5
}
},
props: // as before...,
template: // as before
});
تغییر دیتا درون کامپوننت‌ها
تا اینجا توانستیم از کامپوننت والد داده‌هایی را به کامپوننت‌های فرزند ارسال کنیم. اکنون میخواهیم قابلیت تغییر دیتای تعریف شده‌ی درون کامپوننت والد را درون کامپوننت‌ها نیز داشته باشیم:
Vue.component('child', {
props: ['message'],
methods: {
changeName() {
this.message = "New Name!..."
}
},
template: '#child-template'
});
new Vue({
el: '#app',
data() {
return {
name: 'DNT!'
}
}
}); تمپلیت کامپوننت فوق نیز به صورت x-template درون DOM تعریف شده است:
<script type="text/x-template" id="child-template">
<div>
<p>{{ message }}</p>
<button @click="changeName">Change Name</button>
</div>
</script>
فراخوانی کامپوننت نیز به اینصورت می‌باشد:
<div id="app">
<child :message="name"></child>
</div> همانطور که مشاهده می‌کنید، دیتای name را از طریق ویژگی message توانسته‌ایم به کامپوننت child ارسال کنیم. درون تمپلیت آن نیز یک دکمه را برای تغییر مقدار این ویژگی تعریف کرده‌ایم. تغییر این ویژگی نیز یک assignment ساده است. اما اگر بر روی دکمه‌ی Change Name کلیک کنید، هشدار زیر را درون کنسول مشاهده خواهید کرد:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message"
found in
---> <Child>
<Root> دلیل آن نیز مشخص است؛ زیرا با تغییر این ویژگی، کامپوننت والد از وجود تغییرات مطلع نشده‌است و فقط این تغییرات، درون کامپوننت child صورت گرفته‌است. برای اطلاع‌رسانی کامپوننت والد میتوانیم از یک ایونت ویژه استفاده کنیم و کامپوننت والد را از وجود تغییرات مطلع کنیم:
changeName() {
this.message = "New Name!...",
this.$emit("change-name", this.message);
} برای تگ child نیز این ایونت را اضافه خواهیم کرد:
<child :message="name" @change-name="name = $event"></child>
در اینحالت با تغییر ویژگی message، مقدار دیتای name نیز بلافاصله تغییر پیدا خواهد کرد.
Slots
Slot یک روش عالی برای جایگزینی محتوای درون یک کامپوننت است. فرض کنید میخواهیم کامپوننت‌مان به صورت زیر باشد:
<modal>
Hello
</modal> در اینحالت باید درون تمپلیت مکان قرارگیری Hello را تعیین کنیم. اینکار را میتوانیم با قرار دادن تگ slot انجام دهیم:
Vue.component('modal', {
template: `
...
<div class="modal-body">
<slot></slot>
</div>
...
`
}); اکنون هر محتوایی که درون تگ modal قرار گیرد، در قسمت slot نمایش داده خواهد شد. این نوع slot به صورت پیش‌فرض می‌باشد. در واقع میتوانیم slotها را نیز نامگذاری کنیم. به عنوان مثال یک slot برای عنوان modal، یک slot برای بدنه modal و یک slot دیگر برای فوتر modal تعریف کنیم:
Vue.component('modal', {
template: `
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailsModalLabel">
<slot name="title"></slot>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>
`
}); اکنون میتوانیم محتوای مورد نظر را برای قرارگیری درون slotها تعیین کنیم:
<modal>
<template slot="title">Title</template>
<template slot="body">Lorem ipsum dolor sit amet.</template>
<template slot="footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</template>
</modal>
