<!DOCTYPE?html>
<html?lang="zh-CN">
<head>
??<meta?charset="UTF-8">
??<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
??<title>Document</title>
??<script?src="https://cdn.staticfile.org/vue/2.6.12/vue.min.js"></script>
</head>?
<body>
??<div?id="app">
????<h2>父組件：</h2>
????<p>num1:?{{num1}}</p>
????<p>num2:?{{num2}}</p>
????<cpn?@dnm1='dnm1'?@dnm2='dnm2'
????:pnum1='num1'?:pnum2='num2'
?????/>????
??</div>
??<template?id="cpn">
????<div>
??????<h2>子組件props：</h2>
??????<p>pnum1:?{{pnum1}}</p>
??????<p>pnum2:?{{pnum2}}</p>
??????<h2>子組件data:</h2>
??????<p>請輸入:</p>
??????input1?<input?type="text"?:value="dnum1"?@input='change1'><br>
??????input2?<input?type="text"?:value="dnum2"?@input='change2'>
??????<p>dnum1:?{{dnum1}}</p>
??????<p>dnum2:?{{dnum2}}</p>?
????</div>
??</template>
??<script>
????const?cpn?=?{
??????template:?'#cpn',
??????data()?{
????????return?{
??????????dnum1:?this.pnum1,
??????????dnum2:?this.pnum2
????????}
??????},
??????props:?{
????????pnum1:??Number,
????????pnum2:?Number
??????},
??????methods:?{
????????change1(event)?{
??????????this.dnum1?=?event.target.value;
??????????this.dnum2?=?100*this.dnum1;
??????????this.$emit('dnm2',this.dnum2)
??????????this.$emit('dnm1',this.dnum1)
????????},
????????change2(event)?{
??????????this.dnum2?=?event.target.value;
??????????this.dnum1?=?this.dnum2/100;
??????????this.$emit('dnm1',this.dnum1)
??????????this.$emit('dnm2',this.dnum2)
????????}
??????}
????}
????const?vm=new?Vue({
??????el:'#app',
??????data:{
????????num1:?0,
????????num2:?1
??????},
??????methods:{
????????dnm1(value)?{
??????????this.num1?=?value
????????},
????????dnm2(value)?{
??????????this.num2?=?value
????????}
??????},
??????components:?{
????????cpn
??????}
????});
??</script>
</body>
</html>
input 輸入=>子組件data同步更新，并傳入@input事件，利用事件$emit=>父組件=>子組件props ?? No2=No1*100
