Vue.js 是什么

Vue.js (讀音 /vjuː/，類似于 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。

學習筆記：在vue2.0中，父組件調用子組件時，想要將父組件中的函數體也做傳遞.

1. 通過props ：需要從子組件傳參數到父組件時適用

// 父組件.vue

<template> <div>  <ok-input :params='number' :callback='callbackNum'></ok-input> </div></template><script type="text/ecmascript-6"> import okInput from '../ok-input/okinput.vue'; export default {  props: {},  data() {   return {    number: {},    callbackNum: function (x) {     console.log(x);    }   };  },  methods: {  },  components: {   'ok-input': okInput  } };</script>

// 子組件.vue

<template> <div>   <input v-model='numVal' @change='handleFun'></input> </div></template><script type="text/ecmascript-6"> import {Input, Select, Option, Button} from 'element-ui'; import 'element-ui/lib/theme-default/index.css'; export default {  props: {   params: {    type: Object,    default: {     type: ''    }   },   callback: {}  },  data() {   return {    x: 'hah',      numVal: ''   };  },  methods: {   handleFun(val) {     this.callback(val); // 將參數傳回父組件中的回調函數   }  },  components: {   'el-input': Input,  } };</script>

2.通過$emit： 只需獲得當前操作對象時適用

// 父組件.vue<template> <div>  <ok-input :params='inputs' @change='handleAge'></ok-input> </div></template><script type="text/ecmascript-6"> import okInput from '../ok-input/okinput.vue'; export default {  props: {},  data() {   return {    number: {}   };  },  methods: {   handleAge(evt) {    console.log(evt.target.value); // 接收從子組件傳過來的當前對象   }  },  components: {   'ok-input': okInput  } };</script>

// 子組件.vue

<template> <div>   <input v-model='numVal' @blur='handleChange'></input> </div></template><script type="text/ecmascript-6"> import {Input, Select, Option, Button} from 'element-ui'; import 'element-ui/lib/theme-default/index.css'; export default {  props: {   params: {    type: Object,    default: {     type: ''    }   },   callback: {}  },  data() {   return {    x: 'hah',      numVal: ''   };  },  methods: {   handleChange(evt) {    this.$emit('change', evt); // 將當前對象 evt 傳遞到父組件   },  },  components: {   'el-input': Input,  } };</script>