(CustomSelect.vue)子組件要偵聽父組件(App.vue)來的props，使用watch監聽，來變更子組件的數據。(備註:computed也可以) 父組件 App.vue <template> <div id="app"> 父組件： <el-input-number v-model="parentSelectedValue" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> <custom-select :parentSelectedValue="parentSelectedValue" :title="title" @returnSelectedChange="getSelectedValue"></custom-select> 子組件，變更時選擇的數值：{{ selectedValue }} </div> </template> <script> import customSelect from "./components/CustomSelect.vue"; export default { name: "App", components: { customSelect, }, data() { return { selectedValue: null, title: "縣市", parentSelectedValue: null, }; }, methods: { getSelectedValue(val) { this.selectedValue = val; }, handleChange(value) { this.parentSelectedValue = value; }, }, }; </script> <style></style> 子組件 CustomSelect.vue <template> <div> <b>{{ title }}：</b> <el-select v-model="value" placeholder="請選擇縣市" @change="selectedChange"> <el-option v-for="item in options" :key="item.

安裝 Node.js 安裝 Vue CLI npm install -g @vue/cli 創建 Vue.js 專案 vue create my-project 啟動 Vue.js 專案 cd my-project npm run serve

原本要傳遞三層 App -> FirstLayer -> SecondLayer -> ThirdLayer 可使用Provide和Inject提供跨多層組件傳遞數據的方式 App -> ThirdLayer App.vue <template> <div id="app"> <div :class="theme"> <button @click="changeFontSize">"第一層"字型變大</button> <FirstLayer ref="first" /> </div> </div> </template> <script> import FirstLayer from "./components/FirstLayer"; export default { name: "App", data() { return { myName: "ming", theme: "theme" }; }, provide() { return { myName: this.myName, changeBgColor: this.changeBgColor }; }, components: { FirstLayer }, methods: { changeBgColor() { console.log("changeBgColor"); this.theme = "dark-theme"; }, changeFontSize() { this.