shell程式設計_判斷固定字串結尾
阿新 • • 發佈:2022-11-29
父元件程式碼如下:
<template> <div> 我是父元件: <input type="text" v-model="msg"> <son-box v-model="msg"/> </div> </template> <script> // 匯入子元件 import SonBox from '@/components/son.vue' export default { name:'FatherBox', components:{ SonBox }, data(){ return{ msg:'測試內容' } } } </script> 子元件程式碼如下: <template> <div> <!-- 子元件接收父傳過來的資料,並偵聽內容的更改狀態 --> 我是子元件: <input type="text" :value="value" @input="changeValue($event.target.value)"/> </div> </template><script> export default { name: "SonBox", props: { value: { required: true, } }, methods: { changeValue(value){ // v-model語法糖,在設定子傳父,時設定input事件,並攜帶value引數,修改父元件的資料實現雙向資料繫結。 this.$emit('input',value) //觸發input事件,父元件接收input事件 } }, }; </script>