VUE 元件 + el 安裝配置
阿新 • • 發佈:2020-08-12
###1. 定義子元件 ``` ```javascript <template> <div>{{data}} </div> </template> <script> export default { props: ['data'], // 接收父元件給子元件定義的屬性 } </script> ``` ``` ###2. 子元件引入, 註冊, 使用 ``` ```js <template> <div> 父元件顯示:{{msg}} <DemoComp :data='msg' ></DemoComp> </div> </template> <script> import DemoComp from '@/components/DemoComp' export default { components: { DemoComp }, data() { return { msg: '父元件的資訊' } }, methods: { } } </script> ``` ``` ###3. 給子元件新增事件及事件處理方法 ``` ```javascript<template> <div> 父元件顯示:{{msg}} <DemoComp :data='msg' @changeMsg='change' ></DemoComp> </div> </template> <script> import DemoComp from '@/components/DemoComp' export default { components: { DemoComp }, data() { return { msg:'父元件的資訊' } }, methods: { change(data) { // debugger // alert('呼叫了父元件的方法, 接收到資訊:'+data) this.msg = data // 更新父元件的內容 } } } </script> ``` ``` ###4. 子元件通過觸發方法, 向父元件傳值 ``` ```javascript <template> <div>{{data}} <button @click="emitfather">呼叫父元件方法</button> </div> </template> <script> export default { props: ['data'], // 接收父元件給子元件定義的屬性 methods: { emitfather() { this.$emit('changeMsg', '子元件資訊') } } } </script> ``` ``` ###5. 屬性.sync 方式, 來更新父元件的資訊, 父元件內容 ``` ```javascript <DemoComp :data.sync='msg' ></DemoComp> ``` ``` ###6. 子元件內容: ``` ```javascript <template> <div>{{data}} <button @click="emitfather">呼叫父元件方法</button> <button @click="$emit('update:data', '使用sync更新父元件')">更新父元件資訊</button> </div> </template> <script> export default { props: ['data'], // 接收父元件給子元件定義的屬性 methods: { emitfather() { this.$emit('changeMsg', '子元件資訊') } } } </script> ``` ``` ###7. element-ui的安裝和引入 ``` ```javascript // 1. 安裝: npm install element-ui // 2. 配置: // main.js檔案 import Vue from 'vue' import App from './App' import router from './router' //========== 增加這部分內容 // 引入 elementui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) //=========== ``` Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` ``` ``` ###8. element-ui的使用 ``` ```javascript // 元件中直接使用 element-ui的元件即可 <template> <div> <el-dialog title="新增圖書" :visible="visible" > ... </el-dialog> </div> </template> ``` ```