要するに、子供たちが父親に引き継ぐことは一般的な要求であり、一般的に私たちは$ on + $ emitでそれを達成することができます
サブコンポーネントから返される値を計算する必要がない場合もありますが、元の値を上書きするために使用されます。この
場合、$ on + $ emitメソッドを使用すると、イベント名とメソッド名が使用されます。リソースの典型的な浪費であり、コードに量を追加します
戻り値が元の値を上書きするためにのみ使用される場合は、.sync修飾子を使用して簡略化できます
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text-document>
<!-- 用 .sync 简化 -->
<text-document v-bind:title.sync="doc.title"></text-document>
タイトルがない場合は、オブジェクトを渡して複数の値をバインドできます
デモ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Vue .sync 修饰符 简单实例</title>
</head>
<body>
<div id="swq">
<App></App>
</div>
<script type="text/x-template" id="App-template">
<div>
<h1>例1: $on + $emit 子传父方法</h1>
<strong>适合传回来父组件的值, 还需要复杂计算的情况</strong>
<component1 :val="component1Val" @update-component1="updataComponent1" />
<h1>例2: 父传子一个变量, 子更新后反馈给父</h1>
<strong>传回来父组件的值, 只是替换原值的情况($event, 箭头函数都行)</strong>
<component2 :val="component2Val" @update-component2="component2Val = $event" />
<!--<component2 :val="component2Val" @update-component2="v => component2Val = v" />-->
<h1>例3: 父传子一个变量, 子更新后反馈给父(.sync 修饰符 简写版)</h1>
<strong>本质同例2</strong>
<component3 :val.sync="component3Val" />
<h1>例4: v-bind + .sync 绑定多个</h1>
<strong>v-bind 不能简写成 :</strong>
<component4 v-bind.sync="component4Obj" />
</div>
</script>
<script type="text/x-template" id="component1-template">
<div>
<div>val: {
{
val}}</div>
<button @click="handleClick">update component1</button>
</div>
</script>
<script type="text/x-template" id="component2-template">
<div>
<div>val: {
{
val}}</div>
<button @click="handleClick">update component2</button>
</div>
</script>
<script type="text/x-template" id="component3-template">
<div>
<div>val: {
{
val}}</div>
<button @click="handleClick">update component3</button>
</div>
</script>
<script type="text/x-template" id="component4-template">
<div>
<div>aa: {
{
aa}}</div>
<div>bb: {
{
bb}}</div>
<div>cc: {
{
cc}}</div>
<button @click="handleClickA">update aa</button>
<button @click="handleClickB">update bb</button>
<button @click="handleClickC">update cc</button>
</div>
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.6/vue.min.js"></script>
<script type="text/javascript">
var component1, component2, component3, component4;
component1 = {
template: "#component1-template",
props: ["val"],
methods: {
handleClick() {
this.$emit("update-component1", "component1 的数据更新了")
}
},
};
component2 = {
template: "#component2-template",
props: ["val"],
methods: {
handleClick() {
this.$emit("update-component2", "component2.val 的数据更新了")
}
},
};
component3 = {
template: "#component3-template",
props: ["val"],
methods: {
handleClick() {
this.$emit("update:val", "component3.val 的数据更新了")
}
},
};
component4 = {
template: "#component4-template",
props: ["aa", "bb", "cc"],
methods: {
handleClickA() {
this.$emit("update:aa", "component4.aa AA")
},
handleClickB() {
this.$emit("update:bb", "component4.bb BB")
},
handleClickC() {
this.$emit("update:cc", "component4.cc CC")
},
},
};
var App = {
template: "#App-template",
data: function() {
return {
component1Val: "传入 component1.val 的数据",
component2Val: "传入 component2.val 的数据",
component3Val: "传入 component3.val 的数据",
component4Obj: {
aa: "aa",
bb: "bb",
cc: "cc",
}
}
},
components: {
component1,
component2,
component3,
component4,
},
methods: {
updataComponent1(value) {
console.log("updataComponent1: ", value)
console.log("若干复杂计算")
this.component1Val = value
},
},
};
var vu = new Vue({
el: "#swq",
components: {
App: App,
},
})
</script>
</body>
</html>
参考資料
カスタムイベント— Vue.js
//終わり