[vue3]组件间v-bind,v-model传参(defineProps,defineEmits)

/ 286评论 / 8991阅读 / 2点赞

1. 自定义组件间也可以和普通标签(<div> <span>)一样指定属性传参

2. 形如(<child value="hello coolight"></child>)给组件<child>指定value属性为"hello coolight"

3. 我们也可以自己模拟v-model的效果

下面我们来聊聊怎么传参、接收与更新

传参,v-bind

<script setup>
import { toRefs } from 'vue';
const props = defineProps({
    text:{
        type:String,
        default:"默认:hello coolight",
        required:false
    }
})

const {
    text,
} = toRefs(props);
</script>

<template>
    <span>{{props.text}} - {{text}}</span>
</template>
<script setup>
import helloVue from '../../components/global/hello.vue';
</script>

<template>
    <div>
        <hello-vue />
        <hello-vue text="洛天依"/>
        <hello-vue :text="'v-bind:洛天依'" />
    </div>
</template>

v-model

一般的传参进来,组件对它是只读的,不能修改。

只读也并不完全,对于数组和对象是可以操作其内部值的。

但我们可以使用v-model指定参数,使之允许组件来修改它。

”只读“的探讨

<script setup>
import { reactive } from 'vue';
import { toRefs } from 'vue';
const props = defineProps({
    obj:{
        type:Object
    }
})

const {
    obj,
} = toRefs(props);

const btn1_click = () => {
    props.obj.hello = "coolight - 1";
}
const btn2_click = () => {
    props.obj = reactive({
        hello:"coolight - 2"
    })
}
</script>

<template>
    <div>
        <button @click="btn1_click">1: {{obj.hello}}</button>
        <button @click="btn2_click">2: {{obj.hello}}</button>
    </div>
</template>
<script setup>
import { reactive } from 'vue';
import helloVue from '../../../components/global/hello.vue';

let obj = reactive({
    hello:"洛天依"
})
</script>

<template>
    <div>
        <span>span: {{obj.hello}}</span>
        <hello-vue :obj="obj" />
    </div>
</template>

使用v-model

<script setup>
import { toRefs } from 'vue';
const props = defineProps({
    obj:{
        type:Object
    }
})
const emits =  defineEmits ({
    'update:obj':null  //null位置可以是一个检查函数,用以检查绑定这个信号的处理函数是否有接收参数等,这里就不需要了
});

const {
    obj,
} = toRefs(props);

const btn1_click = () => {
    props.obj.hello = "btn1";
}
const btn2_click = () => {
    emits('update:obj', {
        hello:"btn2"
    });
}
</script>

<template>
    <div>
        <button @click="btn1_click">{{obj.hello}} - 修改为 btn1</button>
        <button @click="btn2_click">{{obj.hello}} - 修改为 btn2</button>
    </div>
</template>
<script setup>
import { reactive } from 'vue';
import helloVue from '../../../components/global/hello.vue';

let mValue = reactive({
    obj:{
        hello:"洛天依"
    },
})
</script>

<template>
    <div>
        <span>span: {{mValue.obj.hello}}</span>
        <hello-vue v-model:obj="mValue.obj"/>
    </div>
</template>

尝试取代v-model

<script setup>
import { reactive } from 'vue';
import helloVue from '../../../components/global/hello.vue';

let mValue = reactive({
    obj:{
        hello:"洛天依"
    },
})
const change = (in_obj) => {
    console.log("我们的change");
    mValue.obj = in_obj;
}
</script>

<template>
    <div>
        <span>span: {{mValue.obj.hello}}</span>
        <!-- 也可以这样:
            <hello-vue v-model:obj="mValue.obj" @update:obj="change"/>
        -->
        <hello-vue :obj="mValue.obj" @update:obj="change"/>
    </div>
</template>
  1. Orvilleevoni说道:

    טלגראס כיוונים

    זכו הנהנים לאתר המידע והנתונים והעזרה הרשמי והמוסמך מטעם טלגרם כיוונים! במקום תוכלו לאתר ולמצוא את כל המידע והפרטים החדיש והעדכני ביותר זמין אודות תשתית טלגראס ואופני לשימוש בה בצורה נכונה.

    מה מציין טלגרף נתיבים?
    טלגרמות אופקים מייצגת מערכת המבוססת על תקשורת המיועדת להפצה ורכישה עבור קנאביס ומריחואנה בארץ. באמצעות המסרים והמסגרות בטלגראס, לקוחות יכולים להשיג ולהשיג את מוצרי קנבי באופן נגיש ומיידי.

    באיזה אופן להשתלב בטלגראס?
    כדי להתחבר בשימוש נכון בפלטפורמת טלגרם, אתם נדרשים להצטרף ל למקומות ולקבוצות המומלצים. בנקודה זו באתר רשאים לאתר ולמצוא מדריך מתוך לינקים לערוצים מעורבים ומובטחים. כתוצאה מכך, תוכלו להתחיל בשלבים הרכישה והסיפוק מסביב מוצרי הקנבי.

    הדרכות ומידע
    באתר הנוכחי ניתן למצוא אוסף של הדרכות וכללים מפורטים בנוגע ל השימוש בטלגראס, כולל:
    – החברות למקומות מומלצים
    – סדרת האספקה
    – אבטחה והגנה בהפעלה בטלגראס
    – והרבה תוכן נוסף

    קישורים רצויים

    בסעיף זה צירים לשיחות ולפורומים מומלצים בפלטפורמת טלגרם:
    – מקום הפרטים והעדכונים המאושר
    – קבוצת הייעוץ והליווי למשתמשים
    – ערוץ לקבלת מוצרי קנבי מוטבחים
    – מבחר אתרים קנבי מאומתות

    אנו מכבדים את כולם על השתייכותכם לאתר הידע והמידע של טלגראס נתיבים ומצפים עבורכם חוויית שירות מרוצה ואמינה!

  2. XRumer23jatup说道:

    ?Justice has finally prevailed! For the second day in a row, everything was fine, and that’s already a start. After his shift, he went to the accounting department to his wife. Coming in, he caught a bunch of sidelong glances, and tried to catch his wife’s eyes in one of them:

    Respected ones, if our life is so interesting to you — I came to talk to you! Ask about everything, including our weight. Yes, Victoria Alexandrovna? Apparently, you have no other interests.

    The room was filled with silence. The exchange of glances between the employees was absolutely silent — and each knew that this passionate speech was addressed specifically to them. Blushing, they sank into their desks and began to do something diligently on the computer, although they had no urgent work. Tatyana looked at everything with laughter, and a smile reappeared on her face. Gratitude and pride for her husband were read in her eyes:

    — Thank you, you really got them! Vika even came up and apologized, saying it was all wrong, and she was very ashamed. Thank you, my love!

  3. XRumer23jatup说道:

    Bản cài đặt B29 IOS – Giải pháp vượt trội cho các tín đồ iOS

    Trong thế giới công nghệ đầy sôi động hiện nay, trải nghiệm người dùng luôn là yếu tố then chốt. Với sự ra đời của Bản cài đặt B29 IOS, người dùng sẽ được hưởng trọn vẹn những tính năng ưu việt, mang đến sự hài lòng tuyệt đối. Hãy cùng khám phá những ưu điểm vượt trội của bản cài đặt này!

    Tính bảo mật tối đa
    Bản cài đặt B29 IOS được thiết kế với mục tiêu đảm bảo an toàn dữ liệu tuyệt đối cho người dùng. Nhờ hệ thống mã hóa hiện đại, thông tin cá nhân và dữ liệu nhạy cảm của bạn luôn được bảo vệ an toàn khỏi những kẻ xâm nhập trái phép.

    Trải nghiệm người dùng đỉnh cao
    Giao diện thân thiện, đơn giản nhưng không kém phần hiện đại, B29 IOS mang đến cho người dùng trải nghiệm duyệt web, truy cập ứng dụng và sử dụng thiết bị một cách trôi chảy, mượt mà. Các tính năng thông minh được tối ưu hóa, giúp nâng cao hiệu suất và tiết kiệm pin đáng kể.

    Tính tương thích rộng rãi
    Bản cài đặt B29 IOS được phát triển với mục tiêu tương thích với mọi thiết bị iOS từ các dòng iPhone, iPad cho đến iPod Touch. Dù là người dùng mới hay lâu năm của hệ điều hành iOS, B29 đều mang đến sự hài lòng tuyệt đối.

    Quá trình cài đặt đơn giản
    Với những hướng dẫn chi tiết, việc cài đặt B29 IOS trở nên nhanh chóng và dễ dàng. Chỉ với vài thao tác đơn giản, bạn đã có thể trải nghiệm ngay tất cả những tính năng tuyệt vời mà bản cài đặt này mang lại.

    Bản cài đặt B29 IOS không chỉ là một bản cài đặt đơn thuần, mà còn là giải pháp công nghệ hiện đại, nâng tầm trải nghiệm người dùng lên một tầm cao mới. Hãy trở thành một phần của cộng đồng sử dụng B29 IOS để khám phá những tiện ích tuyệt vời mà nó có thể mang lại!

  4. LarryGok说道:

    Замена венцов красноярск
    Геракл24: Квалифицированная Смена Основания, Венцов, Настилов и Передвижение Строений

    Компания Геракл24 специализируется на предоставлении всесторонних сервисов по замене фундамента, венцов, полов и перемещению зданий в месте Красноярске и в окрестностях. Наша группа профессиональных мастеров обещает высокое качество выполнения различных типов реставрационных работ, будь то деревянные, с каркасом, кирпичные или бетонные конструкции дома.

    Достоинства услуг Геракл24

    Квалификация и стаж:
    Весь процесс проводятся только опытными специалистами, с обладанием большой стаж в области возведения и восстановления строений. Наши специалисты эксперты в своей области и реализуют проекты с максимальной точностью и учетом всех деталей.

    Полный спектр услуг:
    Мы предоставляем полный спектр услуг по восстановлению и восстановлению зданий:

    Реставрация фундамента: замена и укрепление фундамента, что обеспечивает долгий срок службы вашего дома и устранить проблемы, вызванные оседанием и деформацией.

    Замена венцов: замена нижних венцов деревянных домов, которые наиболее часто гниют и разрушаются.

    Смена настилов: установка новых полов, что значительно улучшает внешний вид и функциональность помещения.

    Перенос строений: качественный и безопасный перенос строений на другие участки, что помогает сохранить здание и избегает дополнительных затрат на возведение нового.

    Работа с любыми видами зданий:

    Деревянные дома: реставрация и усиление деревянных элементов, защита от гниения и вредителей.

    Каркасные дома: усиление каркасных конструкций и замена поврежденных элементов.

    Дома из кирпича: восстановление кирпичной кладки и усиление стен.

    Бетонные строения: реставрация и усиление бетонных элементов, исправление трещин и разрушений.

    Качество и прочность:
    Мы применяем только высококачественные материалы и современное оборудование, что обеспечивает долгий срок службы и надежность всех выполненных работ. Все наши проекты проходят тщательную проверку качества на каждом этапе выполнения.

    Личный подход:
    Для каждого клиента мы предлагаем индивидуальные решения, с учетом всех особенностей и пожеланий. Наша цель – чтобы результат нашей работы полностью соответствовал вашим ожиданиям и требованиям.

    Почему стоит выбрать Геракл24?
    Обратившись к нам, вы найдете надежного партнера, который возьмет на себя все заботы по ремонту и реконструкции вашего строения. Мы обеспечиваем выполнение всех проектов в сроки, оговоренные заранее и с в соответствии с нормами и стандартами. Обратившись в Геракл24, вы можете не сомневаться, что ваш дом в надежных руках.

    Мы готовы предоставить консультацию и ответить на ваши вопросы. Контактируйте с нами, чтобы обсудить ваш проект и узнать больше о наших услугах. Мы обеспечим сохранение и улучшение вашего дома, обеспечив его безопасность и комфорт на долгие годы.

    Gerakl24 – ваш выбор для реставрации и ремонта домов в Красноярске и области.

  5. XRumer23jatup说道:

    הפלטפורמה הווה תוכנה רווחת במדינה לקנייה של מריחואנה בצורה אינטרנטי. היא מספקת ממשק משתמש נוח ובטוח לקנייה ולקבלת שילוחים של פריטי צמח הקנאביס מגוונים. בסקירה זו נסקור את העיקרון שמאחורי הפלטפורמה, איך היא עובדת ומה היתרונות של השימוש בזו.

    מהי הפלטפורמה?

    האפליקציה מהווה שיטה לקנייה של מריחואנה דרך האפליקציה טלגראם. זו מבוססת על ערוצים וקהילות טלגרם מיוחדות הקרויות ״טלגראס כיוונים, שבהם ניתן להזמין מרחב מוצרי מריחואנה ולקבלת אלו ישירות לשילוח. ערוצי התקשורת האלה מאורגנים על פי איזורים גיאוגרפיים, במטרה לשפר על קבלת המשלוחים.

    כיצד זה עובד?

    התהליך פשוט יחסית. קודם כל, יש להצטרף לערוץ טלגראס הרלוונטי לאזור המגורים. שם אפשר לצפות בתפריטי הפריטים השונים ולהזמין עם המוצרים המבוקשים. לאחר השלמת ההזמנה וסיום התשלום, השליח יגיע לכתובת שצוינה עם הארגז המוזמנת.

    מרבית ערוצי הטלגראס מספקים טווח רחב של מוצרים – זנים של מריחואנה, עוגיות, משקאות ועוד. כמו כן, אפשר לראות חוות דעת מ צרכנים שעברו על איכות הפריטים והשירות.

    מעלות הנעשה בפלטפורמה

    יתרון עיקרי של הפלטפורמה הוא הנוחות והפרטיות. ההזמנה וההכנות מתקיימים מרחוק מכל מקום, בלי צורך בהתכנסות פנים אל פנים. כמו כן, האפליקציה מאובטחת היטב ומבטיחה סודיות גבוה.

    נוסף על זאת, מחירי הפריטים בטלגראס נוטות לבוא זולים, והשילוחים מגיעים במהירות ובמסירות גבוהה. יש גם מרכז תמיכה זמין לכל שאלה או בעיית.

    לסיכום

    טלגראס הינה שיטה חדשנית ויעילה לקנות פריטי קנאביס בישראל. היא משלבת את הנוחות הטכנולוגית מ היישומון הפופולרית, ועם המהירות והפרטיות מ שיטת השילוח הישירה. ככל שהביקוש למריחואנה גדלה, אפליקציות בדוגמת זו צפויות להמשיך ולהתפתח.

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注