liaison v
Dans vue2.0, nous utilisons souvent v-bind pour lier et transmettre des valeurs, mais v-bind est une liaison unidirectionnelle.Ce n'est que lorsque le contenu transmis par le composant parent change que le composant enfant est mis à jour.
<div id="counter">
<button @click="adds()">加1</button>
<br />
<blog-post v-bind:title="counter" ></blog-post>
</div>
const Counter = {
data() {
return {
counter: 0
}
},
methods:{
adds(){
this.counter++
}
}
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: ['counter'],
template: `{
{counter}}`
})
app.mount('#counter');
Le code ci-dessus est une utilisation simple de v-bind simple. Pour le moment, nous ne pouvons utiliser this.$emit que pour transmettre des événements et écouter dans le composant parent, ce qui est plus gênant. Pour plus de commodité, vue2.0 peut utiliser le sucre syntaxique v-bind.sync pour implémenter cette méthode (car vue.3.0.sync a été supprimé, je l'ai donc remplacé ici par vue2.0
)
<div id="counter">
<div>父组件展示：{
{obj.age}}</div>
<blog-post v-bind.sync="obj"></blog-post>
</div>
Vue.component('blog-post', {
props:{
age:Number
},
methods:{
add(){
let num = this.age + 1;
this.$emit('update:age', num)
}
},
template:`
<div>
<button @click="add()">点我</button>
<div>{
{age}}</div>
</div>
`
})
new Vue({
el:'#counter',
data:{
obj:{
age:0
}
},
})
Le code ci-dessus est l'utilisation de base de .sync, ce qui m'évite d'écouter les informations renvoyées par le composant enfant dans le composant parent.
Pour une utilisation optimale,
modèle en V
Dans la version vue2.2, il y avait un composant qui permettait aux composants d'utiliser v-molde pour transmettre des valeurs, mais un composant pouvait en avoir un
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age="age"></blog-post>
</div>
Vue.component('blog-post', {
model: {
prop: 'age',
event: 'change'
},
props:{
age:Number
},
methods:{
add(){
let num = this.age + 1;
this.$emit('change', num)
}
},
template:`
<div>
<button @click="add()">点我</button>
<div>{
{age}}</div>
</div>
`
})
new Vue({
el:'#counter',
data:{
age:0
},
})
Ce qui précède est l'une des façons d'utiliser v-molde dans vue2, et il existe d'autres manières d'écrire différentes. Celle-ci est celle que j'utilise depuis longtemps. D'autres peuvent se référer au document officiel v-
molde
En ce qui concerne vue3.0, v-molde permet d'utiliser plusieurs v-moldes sur un composant. Le
v-model sur le composant personnalisé équivaut à transmettre le prop modelValue et à recevoir l'événement update:modelValue lancé :
voir le code et remplacer le libellé de vue2.0 par vue3.0
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model="age"></blog-post>
</div>
const Counter = {
data() {
return {
age: 0
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
modelValue: Number,
},
emits:['update:modelValue'],
methods:{
add(){
let num = this.modelValue += 1;
this.$emit('update:modelValue',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{modelValue}}</div>
`
})
app.mount('#counter');
Ici, nous pouvons voir que nous n'avons pas lié le nom dans v-model. La liaison reçue par le sous-composant est sur le modelValue.Il
est également nécessaire d'utiliser des émetteurs pour lier le nom de rappel, updata:modelValue, bien sûr, cela peut également être modifié. Regardons le cas de plusieurs liaisons v-model
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age="age" v-model:name="name"></blog-post>
</div>
const Counter = {
data() {
return {
age: 0,
name:'你好'
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
age: Number,
name: String
},
emits:['update:age','update:name'],
methods:{
add(){
let num = this.age += 1;
this.$emit('update:age',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{age}}</div>{
{name}}
`
})
app.mount('#counter');
Dans le code ci-dessus, vous pouvez voir la méthode d'écriture modifiée des paramètres de la liaison personnalisée.
Ensuite, comment utiliser v-molde lors de l'utilisation de modificateurs.
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age.numberb="age" ></blog-post>
</div>
const Counter = {
data() {
return {
age: '10',
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
age: Number,
ageModifiers:{
default:() =>(10)
}
},
emits:['update:age'],
methods:{
numberValue(value){
let val = value;
if(this.ageModifiers.numberb){
val = Number(val);
}
return val
},
add(){
let s = this.numberValue(this.age);
let num = s + 1;
this.$emit('update:age',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{age}}</div>{
{name}}
`
})
app.mount('#counter');
Dans le code ci-dessus, nous avons personnalisé un numéro de modificateurb (convertissant les paramètres acceptés en nombres). Nous pouvons voir qu'il y en a un supplémentaire sur le code ageModifiers. Il s'agit d'un modificateur personnalisé fourni au composant via la prop ageModifiers (le format d'écriture nécessaire de Modifiers). Dans le cycle créé du composant, la valeur est true. Lorsque le modificateur n'existe pas ou est erroné, la valeur par défaut est 10.
S'il y a quelque chose qui ne va pas, bienvenue à laisser un message