TA貢獻1865條經(jīng)驗 獲得超7個贊
v-model在組件中如何使用。
實現(xiàn)點擊回應后，父親對兒子說的話變成了兒子的回應。兒子收到的信息也變了，實現(xiàn)通信。
<!-- 父組件 --> <template> <p class="parent"> <p>我是父親, 對兒子說： {{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>我是兒子，父親對我說： {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回應</a> </p> </template> <script> export default { props: { give: String }, model: { prop: 'give', event: 'returnBack' }, methods: { returnBackFn() { this.$emit('returnBack', '還你200塊'); } } } </script>
默認情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event。
舉報