技術標籤：vue前端vue

props屬性

props的命名也可以和component一樣使用小寫單詞+-

直接通過物件傳遞

父元件可以通過v-bind指令，直接將物件傳遞到子元件，傳遞的物件和子元件暴露的props名稱必須一致！
父元件

<child-component v-bind="paramObj"></child-component>
//...
data(){
	return{
		paramObj:{
			id:1,
			name:'testPropName'
		}
	}
}

上面的寫法等同於:id="paramObj.id" :name="paramObj.name"

子元件

props:['id','name']

不要修改props！

注意props僅僅用於父元件傳資料給子元件，而不是反過來，
如果一定需要修改父元件傳過來的值
選擇新建data屬性，並賦值，之後去操作data屬性
示例：

props:['fatherCount'],
data(){
	return{
		count:this.fatherCount
	}
}
//之後操作count就可以了！

如果只是調整props的顯示格式，也可以使用computed計算屬性

computed:{
	computeCount:function(){
		return '從父元件來了一個'+this
 
.fatherCount
	}
}

注意：陣列和物件，是作為引用傳入的！所以子元件修改了陣列和物件，會影響父元件！！！

非Prop的Attribute

子元件沒有使用props和emits定義的屬性，也可以傳遞
一遍用於原生的屬性，例如class style id change 等等，這些屬性會關聯到子元件的根節點上！
如果不希望上述的情況發生，需要使用inheritAttrs:false
可以通過**$attr**屬性來訪問所有的非prop的屬性

子元件實現v-model

v-model作為雙向繫結是非常好用的指令，如果我們需要在子元件上實現v-model雙向繫結，
需要同時實現prop傳值+emit提交反饋

<template>
<input type="text" :value="myName" @input="$emit(update:myName,$event.target.value)" />
</template>
//app.component('model-component'...
props:['myName']

父元件

<model-component v-model:my-name="fatherName"></model-component>
data(){
	return {
		fatherName:''
	}
}

v-modeld的修飾符，子元件可以通過modelModifiers這個prop傳遞
子元件
prop[‘myName’,‘modelModifiers’]
created(){
console.log(this.modelModifiers.test)
}

父元件
v-model.test:my-name=“fatherName”

插槽

v-slot的簡寫如下 具體插槽講解參考官網 內容較多
未具名的插槽寫法如下

<parent-node #default="{item}">
	<span>{{item.name}}</span>
</parent-node>

具名插槽<slot name="header"></slot>只需要把#default改成#header就可以了

多層巢狀

當出現多層父子元件巢狀，
父元件不需要知道哪個子元件使用了資料
子元件不需要知道某個資料到底來源於那個父元件
這時候可以使用vue的provide、inject屬性
父元件

data(){
	return{
		userName:'john'
	}
},
provide(){
	return{
		user:this.userName
	}
}

子元件

inject:['user'],
created(){
	console.log(this.user)
}

非同步元件

defineAsyncComponent
在有需要的時候再從伺服器載入這個模組

ref模板引用

儘量少用ref來直接操作元素！

<input ref="myInput" />

methods:{
	focusInput(){
		this.$refs.myInput.focus()
	}
},
mounted(){
	this.focusInput()
}

$refs只會在元件渲染完成之後生效，儘量避免在模板和計算屬性中使用$refs

強制更新元件，$forceUpdate可以用來強制更新元件，但是儘量不要使用，大部分情況應該直接使用雙向繫結來更新元件