Die Requisiten von Vue ermöglichen es untergeordneten Komponenten, sich zusammen mit der übergeordneten Komponente zu ändern
- 高洛峰Original
- 2016-12-08 16:05:082393Durchsuche
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: d29ef5f65673da5940000af06350cd197d4dd9c7239aac360e401efe89cbb393
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in die Mustache-Syntax des WeChat-AppletsNächster Artikel：Detaillierte Einführung in die Mustache-Syntax des WeChat-Applets