Vueコンポーネントリファレンス使用
28879 ワード
文書ディレクトリコンポーネント参照 父子伝参 props受信パラメータ propsパラメータ検証サポートデータ型 propsパラメータ検証書き方 親伝子実列コード 子伝父伝参 ステップ(実列コード参照) 子伝父実列コード アセンブリパラメータ
父伝子伝参
props受信パラメータ
親コンポーネントがサブコンポーネントにパラメータを渡す場合、
propsパラメータ検証サポートデータ型 String Number Boolean Array Object Date Function Symbol
propsパラメータ検証書き方
親子実列コード
注意:propsでアルパカマークを使用する場合は、
子伝父伝参
手順(実列コード参照)サブアセンブリで定義するトリガイベント サブアセンブリにおけるトリガイベントにおいて、 が送信.親コンポーネントでメソッドをサブコンポーネントに呼び出すことを定義する 子伝父実列コード
父伝子伝参
props受信パラメータ
親コンポーネントがサブコンポーネントにパラメータを渡す場合、
propsパラメータオブジェクトを使用して受信します.このパラメータは配列タイプであってもよいし、オブジェクトタイプであってもよい(propsのタイプ制限と検証が必要な場合)propsパラメータ検証サポートデータ型
propsパラメータ検証書き方
Vue.component('my-component',{
template: `
`,
props:{
// （null
propA: Number,
//
propB: [String,Number],
//
propC: {
type: String,
required: true
},
//
propD: {
type: Number,
default: 100
},
// ( )
propE: {
type: Object,
//
default(){
return {}
}
},
//
propF: {
validator: function (value){
//
return ['success','warning','dange'].indexOf(value) !== -1
}
}
}
})
親子実列コード
注意:propsでアルパカマークを使用する場合は、
-で分割する必要があります.例えば、myDataは、my-dataと書くべきです.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<title>Documenttitle>
<style>
style>
head>
<body>
<div id="app">
<cpn1 :cmessages="messages" :c-number="number">cpn1>
div>
<template id="cpnC1">
<div>
{{cnumber}}
<h2>{{cmessages.title}}h2>
<p>{{cmessages.content}}p>
div>
template>
<script>
//
const cpnC1 = {
template: '#cpnC1',
props: {
cNumber: {
type: Number, //
default: 0, // 0
required: false //
},
cmessages: {
type: Object,
default() { // ，default
return {}
},
required: true //
}
}
}
//
const app = new Vue({
el: '#app',
data: {
number: 102212,
messages:{
title:' ',
content:' '
}
},
components: { //
cpn1: cpnC1
}
})
script>
body>
html>
子伝父伝参
this.$emit()を使用してイベントをトリガーする必要があります手順(実列コード参照)
this.$emit()を介して対応命令
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<title>Documenttitle>
<style>
style>
head>
<body>
<div id="app">
<cpn1 @clickme="childEvent">cpn1>
div>
<template id="cpnC1">
<div>
<button @click="btnClick(item)" v-for="item in cateData" style="margin:10px;">
{{item.name}}
button>
div>
template>
<script>
//
const cpnC1 = {
template: '#cpnC1',
data() {
return {
cateData: [
{ id: 1, name: ' ' },
{ id: 2, name: ' ' },
{ id: 3, name: ' ' },
{ id: 4, name: ' ' }
]
}
},
methods: {
btnClick(item) { //
// this.$emit('clickme',item) ( )，
this.$emit('clickme', item);
}
}
}
//
const app = new Vue({
el: '#app',
data: {
},
components: { //
cpn1: cpnC1
},
methods: {
childEvent(arges) { // ，
console.log(arges); // arges
}
}
})
script>
body>
html>