Das Beispiel in diesem Artikel zeigt Ihnen die Vorteile von Vue, um zu erkennen, dass sich die übergeordnete Komponente und die untergeordneten Komponenten gemeinsam ändern. Der spezifische Inhalt ist wie folgt
Es ähnelt der Verwendung von v -bind, um HTML-Features an einen Ausdruck zu binden. Sie können v-bind verwenden, um dynamische Requisiten an die Daten der übergeordneten Komponente zu binden. Immer wenn sich die Daten der übergeordneten Komponente ändern, werden diese auch an die untergeordnete Komponente übertragen:
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>
Üblicherweise wird die abgekürzte Syntax von v-bind verwendet einfacher: < child :my-message="parentMsg">
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="vue.js"></script>
<meta charset="UTF-8">
<title>vue的props实现父组件变化子组件一起变化</title>
</head>
<body>
<div id="app1">
<input v-model="messsage" > <!--input绑定实例中data中的message-->
<div >
<child v-bind:my-message="messsage"></child> <!--子组件绑定实例中data中的message-->
</div>
</div>
<script>
Vue.config.debug = true;
Vue.component('child',{
props: ['myMessage'], //VUE实例中myMessage 等价于my-message
template: '<span>{{ myMessage }}</span><br>'
});
var vm = new Vue({
el: '#app1',
data:{
messsage:'hello you are a good boy!'
}
});
</script>
</body>
</html>
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
