TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
v-model在組件中如何使用。
實(shí)現(xiàn)點(diǎn)擊回應(yīng)后，父親對(duì)兒子說(shuō)的話(huà)變成了兒子的回應(yīng)。兒子收到的信息也變了，實(shí)現(xiàn)通信。
<!-- 父組件 --> <template> <p class="parent"> <p>我是父親, 對(duì)兒子說(shuō)： {{sthGiveChild}}</p> <Child v-model="sthGiveChild"></Child> </p> </template> <script> import Child from './Child.vue'; export default { data() { return { sthGiveChild: '給你100塊' }; }, components: { Child } } </script>
<!-- 子組件 --> <template> <p class="child"> <p>我是兒子，父親對(duì)我說(shuō)： {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回應(yīng)</a> </p> </template> <script> export default { props: { give: String }, model: { prop: 'give', event: 'returnBack' }, methods: { returnBackFn() { this.$emit('returnBack', '還你200塊'); } } } </script>
默認(rèn)情況下，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event。
舉報(bào)