vue元件引數傳遞問題
元件中的data為什麼是函式？
元件中的資料是儲存在**呢？頂層的vue例項中嗎？並不是的，元件無法訪問vue例項中的data。即使可以訪問，如果所有元件的資料都在頂級vue例項中，那麼vue中的data會十分的臃腫。元件中的資料應該由自己管理。
元件是乙個單獨功能模組的封裝，這個模組有屬於自己的html模板，也應該有屬於自己的資料data，不過這個data是乙個函式。這是為什麼呢？
這是為了保證元件復用時，屬性之間的隔離。利用方法都會重新開闢記憶體空間的機制。當建立多個相同元件例項時，不同元件例項之間的data必須保證不被共享
父子元件通訊之props(父->子)
需求1：在頁面中，父元件請求得到的資料需要在子元件中展示。
需求2：子元件很多，每次建立都要向後他傳送資料，在父元件中進行請求，將資料傳遞給子元件展示。
vue中提供了props用於父元件向子元件中傳遞資料
在子元件中，使用props宣告需要從父級接收到的資料
props的值有兩種方式：
方式一：字串陣列，陣列中的字串就是傳遞時的屬性名稱。
方式二：物件，物件可以設定傳遞時的型別，也可以設定預設值等。
陣列形式的傳遞
1、在父元件中建立資料
data() {
return {
userid: "rayfoo",
name:'rayfoo',
hobby: ['抽菸','喝酒','燙頭']
2、在子元件中建立props
props: ['name','hobby']
3、在子元件中使用屬性
4、在父元件中匯入並使用子元件
import news from "./views/home/news";
components: {
news
物件形式的傳遞
物件引數的傳遞需要指定物件類資料型別、[預設值]、[是否必傳]等引數
支援的型別型別
string
number
boolean
object
data
function
symbol
props:{
title:{
//資料型別 引數可以指定多個[string,number,...]
type: string,
//預設值，在沒有引入傳遞引數時渲染
default: 'message',
//是否為必傳引數
required: false
hobby:{
type: array,
default: function(){
return ['抽菸','喝酒']
需要注意的時，當型別如果是object或者array，預設值必須是乙個函式。
子元件向父元件傳遞資料
子元件中配置事件傳送：
template:
我是乙個小按鈕
methods:
methods: {
giveadvice: function(){
this.$emit('give-advice',this.title);
父元件中監聽
template:
methods:
showadvice: function (advice) {
alert(advice)
需要注意的是，事件如果傳遞的是駝峰式，需要使用下劃線形式發射。具體的操作可以參考官方api
引數同步問題
如果父子間傳遞的引數需要實時的進行雙向繫結，該如何做？
如果修改了props中的值，父元件中的內容不會修改。vue不推薦在子元件中直接修改props的值。
如果需要修改props中的值，可以在子元件中建立乙個data或者computed副本
使用@input事件實現雙向繫結
子元件**：
1、在子元件中宣告props，由父元件傳遞。
2、建立props的副本，當props的副本
3、使用v-model繫結props副本的值
4、監聽控制項的@input，當值發生改變，修改引數值，並且將值彈回父元件
發射屬性到父元件
export default {
name: 'chidren',
props: {
title: string,
info: string
data(){
return{
param: 'giao',
dparam: this.title
methods:{
giao: function(){
this.$emit('giao',this.param);
valchange: function(event){
let newval = event.target.value;
this.param = newval;
this.$emit('title-change',newval);
watch:{
dparam(oldval,newval){
this.param = newval;
this.$emit('title-change',newval);
父元件**
父元件中可以直接使用v-model來修改子元件中屬性
import childred from './chidren';
export default {
name: 'parent',
data(){
return {
title: 'rayfoo',
info: '真帥'
methods:{
giao: function(param){
alert(param);
titlechange:function(newval){
this.title = newval;
components:{
childred
如果資料型別不是string，可能要牽涉一些型別轉換問題。
使用watch進行子父元件雙向繫結
略。。。
父元件中取得子元件的物件
$children-不常用
上面的案例中我們已經成功的在父元件中取得子元件的屬性，也可以從子元件中拿到父元件的屬性，下面介紹乙個更加簡單的操作形式-從父元件中拿到子元件物件。
在父元件中，可以使用：this.\(children[index].屬性名、this.\)children[index].方法名來獲取子元件內的屬性和方法，但是在開發過程中一般不會使用這樣的形式，因為其依賴下標，有很多的不確定性。
btnclick: function(){
console.log(this.$children[0].param);
this.$children[0].showinfo();
$refs-常用
可以在引用子元件的位置給子元件指定乙個ref屬性，例如ref='aaa'
此時，this.\(refs.aaa就是子元件物件，就可以在父元件中使用this.\)refs.aaa來訪問子元件啦~
btnclick: function(){
console.log(this.$refs.child.param);
子元件中訪問父元件物件
$parent不常用
在子元件中可以直接使用$parent來訪問父元件中的內容，但是在子元件中頻繁父元件中的內容，會使得元件的耦合度非常的高，所以開發過程中不常用。
btnclick: function(){
console.log(this.$parent.title);
$root
使用$root可以獲取根元件中的內容
btnclick: function(){
console.log(this.$root.title);
vue 引用src中的檔案 VUE中引用路徑的配置
在vue專案開發中經常引用js css img檔案。當專案較大時檔案層級很多，導致路徑很長，我們可以通過在bulid webpack.base.conf.js 設定簡便的引用路徑 一 引用assets目錄下的檔案 舉例 1 在src components content content.vue 中引...
vue怎麼自己建立元件並引用 vue專案中引入元件
最近在重構乙個vue專案，恨自己當初第一次學的時候沒有寫部落格。現在翻以前自己做的紙質版筆記，不能看，太混亂。所以趁這個時間總結一下。vue是元件化的開發。乙個頁面中，是乙個元件，他也是由多個元件構成的。第乙個問題，專案中怎麼引入頁面？使用v cli自動搭建腳手架，他已經給我們配好了路由，還做好了乙...
vue 靜態引數 Vue 引數傳遞
一 父子元件 1.1父傳子 props 這裡是father元件 這是父元件要傳給子元件的引數 import child from child export default 接受的父元件靜態引數 接受的父元件引數 export default import child from child expor...