Vue 2(2)イベント属性メソッド
19318 ワード
1.属性&方法
各Vueインスタンスは、dataオブジェクトのすべてのプロパティをエージェントし、dataには関数が必要です.
3つのコンポーネントは同じdataを共有しているため、counterを1つ追加するとすべてのコンポーネントに影響します.しかし、この問題は、各コンポーネントに新しいdataオブジェクトを返すことで解決できます.
2.親子コンポーネント通信
親コンポーネントはpropsを介してサブコンポーネントにデータを渡します:(注:camelCased(アルパカ式)名前付きpropは、対応するkebab-case(短横線間隔式)属性名前に変換する必要があります)
サブコンポーネントは、カスタムイベントを使用して親コンポーネントにメッセージを送信します:1.v-on(eventName)を使用してイベント2をリスニングします.$emit(eventName)を使用してイベントをトリガー
3.ダイナミックコンポーネント
保持されたcomponent要素を使用して、そのis特性に動的にバインドすることで、複数のコンポーネントに同じマウントポイントを使用させ、動的に切り替えることができます.keep-alive:切り替えたコンポーネントをメモリに残すと、その状態を保持したり、再レンダリングを回避したりして、性消費を減らすことができます.そのため、keep-aliveコマンドパラメータを追加することができます.
ps:ここでVueのisの特性を学びます.例えば、一定の元素構造 がありますが、
各Vueインスタンスは、dataオブジェクトのすべてのプロパティをエージェントし、dataには関数が必要です.
var data = {
a: 1
};
var vm = new Vue({
data: data
});
console.log(vm);
console.log(vm.a === data.a); // true
//
vm.a = 2;
console.log(data.a); // 2
// ，
data.a = 3;
console.log(vm.a); // 3
//Vue 。 $, data 。
var data = { a: 1 }
var vm = new Vue({
el: '#container1',
data: data
})
console.log(vm.$data === data) // true
console.log(vm.$el === document.getElementById('container1')) // true
data.a = 5;
// $watch
vm.$watch('a', function (newVal, oldVal) {
// `vm.a`
console.log(newVal);
console.log(oldVal);
})3つのコンポーネントは同じdataを共有しているため、counterを1つ追加するとすべてのコンポーネントに影響します.しかし、この問題は、各コンポーネントに新しいdataオブジェクトを返すことで解決できます.
<html>
<body>
<head>
<title>data title>
head>
<div id="container1">
<component1>component1>
<component1>component1>
<component1>component1>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var data = { counter: 0 };
//
Vue.component('component1', {
template: '',
// data ，vue ， data
data: function() {
return {
counter: 0
}
}
});
new Vue({
el: '#container1'
})
script>
html>2.親子コンポーネント通信
親コンポーネントはpropsを介してサブコンポーネントにデータを渡します:(注:camelCased(アルパカ式)名前付きpropは、対応するkebab-case(短横線間隔式)属性名前に変換する必要があります)
<html>
<body>
<head>
<title>propstitle>
head>
<div id="container1">
<child my-message="hello!">child>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
//
Vue.component('child', {
// props
props: ['myMessage'],
template: '{{ myMessage}}'
});
new Vue({
el: '#container1'
})
script>
html>サブコンポーネントは、カスタムイベントを使用して親コンポーネントにメッセージを送信します:1.v-on(eventName)を使用してイベント2をリスニングします.$emit(eventName)を使用してイベントをトリガー
<html>
<body>
<head>
<title>$emittitle>
head>
<div id="container1">
<p> {{ total }} p>
// v-on:increment
<button-counter v-on:increment="incrementTotal">button-counter>
<button-counter v-on:increment="incrementTotal">button-counter>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
//
Vue.component('button-counter', {
template: '',
data: function() {
return {
counter: 0
}
},
methods: {
increment: function() {
this.counter += 1;
// $emit v-on
this.$emit('increment');
}
},
})
//
new Vue({
el: '#container1',
data: {
total: 0
},
methods: {
incrementTotal: function() {
this.total += 1;
}
}
})
script>
html>3.ダイナミックコンポーネント
保持されたcomponent要素を使用して、そのis特性に動的にバインドすることで、複数のコンポーネントに同じマウントポイントを使用させ、動的に切り替えることができます.keep-alive:切り替えたコンポーネントをメモリに残すと、その状態を保持したり、再レンダリングを回避したりして、性消費を減らすことができます.そのため、keep-aliveコマンドパラメータを追加することができます.
ps:ここでVueのisの特性を学びます.例えば、一定の元素構造
<ul>
<li is="your-component">li>
ul>
<html>
<body>
<head>
<title> title>
head>
<template id="tab-01">
<div> tab1div>
template>
<template id='tab-02'>
<div> tab2div>
template>
<div id="container1">
<ul>
<li>
<a href="javascript:void(0)" @click="toggleTabs(tab01Text);">{{ tab01Text }}a>
li>
<li>
<a href="javascript:void(0)" @click="toggleTabs(tab02Text);">{{ tab02Text }}a>
li>
ul>
<div class='content' style='height: 200px'>
<keep-alive>
<component :is="currentView">component>
keep-alive>
div>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var tab01 = Vue.extend({
template: '#tab-01'
});
var tab02 = Vue.extend({
template: '#tab-02'
});
// vue
var newVue = new Vue({
el: '#container1',
data: {
tab01Text: "tab01", //
tab02Text: "tab02", //
currentView: "tab01" //
},
//
components: {
tab01: tab01,
tab02: tab02,
},
methods: {
// tab
toggleTabs: function(tabText) {
this.currentView = tabText;
}
}
})
script>
html>