Vue3中父子组件数据通信之v-model的绑定使用
hi，我是温新，一名PHPer
Vue3父子组件通信时可以使用v-model双向绑定进行简化操作。
举个例子：父组件通过prop将数据传递给子组件，子组件通过emit将事件传递给父组件，用以实现父子组件之间的通信。
常用的父子组件通信使用
该案例中，在子组件中点击需要，需要修改父组件中的数据。
1）子组件向组件说，我要修改($emit)你数据的
count数据；2）父组件对子组件说：我已经收到的请求，然后再其内部修改自己的count值。
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(85, 85, 85)"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">html</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">lang</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"en"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">meta</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">charset</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"UTF-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">meta</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">http-equiv</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"X-UA-Compatible"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">content</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"IE=edge"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">meta</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">name</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"viewport"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">content</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"width=device-width, initial-scale=1.0"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>Document<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">src</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"https://unpkg.com/vue@next"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> // 父组件对子组件发出的自定义事件进行监听</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">child-component</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">:count</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"count"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">@incr</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"parentIncr"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">child-component</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">data</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">count</span>:<span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">methods</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">parentIncr</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">count</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">++</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'childComponent'</span>,{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">props</span>:[<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'count'</span>],</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">template</span>:<span style="box-sizing: border-box;color: rgb(255, 85, 0)">`<div @click="incr"><p>我是子组件</p><p>{{count}}</p></div>`</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">methods</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">incr</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 向父组件发出事件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">$emit</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'incr'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>
使用v-model双向绑定
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">id</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><!--</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">双向绑定父组件中的count数据</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><!--</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">并将其传递给子组件</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">child</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">v</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">model</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"count"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">child</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">script</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">data</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(51, 0, 170)">count</span>:<span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'childComponent'</span>,{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 接收父级件传递的值</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 必须使用 modelValue 来接收</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">props</span>:[<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'modelValue'</span>],</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">template</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">`</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">@click</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"incr"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">我是子组件</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span>{{<span style="box-sizing: border-box;color: rgb(0, 0, 0)">modelValue</span>}}<span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">`</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">methods</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">incr</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">/**</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">* 1）子组件中发出事件，并使用第二个参数直接修改</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">* 父组件中的数据。</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">* 2）发出的方法必须是 update:modelValue</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">**/</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$emit</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'update:modelValue'</span>,<span style="box-sizing: border-box;color: rgb(0, 0, 0)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">modelValue</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">+</span><span style="box-sizing: border-box;color: rgb(17, 102, 68)">1</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">script</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span>
这就是Vue3中所约定的使用方法，那么也可以使用自定义的名称：
使用方法：v-model:自定义名称，
案例：
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">id</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><!--</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">使用自定义名称</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">child</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">v</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">model</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">ziruchu</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"count"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">child</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">script</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">data</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(51, 0, 170)">count</span>:<span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'childComponent'</span>,{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">props</span>:[<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'ziruchu'</span>],</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">template</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">`</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">@click</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"incr"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">我是子组件</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span>{{<span style="box-sizing: border-box;color: rgb(0, 0, 0)">ziruchu</span>}}<span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">`</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">methods</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">incr</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$emit</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'update:ziruchu'</span>,<span style="box-sizing: border-box;color: rgb(0, 0, 0)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">ziruchu</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">+</span><span style="box-sizing: border-box;color: rgb(17, 102, 68)">1</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">script</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span>
我是温新
第天进步一点，就一点点
请登录后再评论