Vue-cli 組件嵌套
全局組件注冊:(main.js)
import 組件名 form '位置'
vue.component("組件標簽名",組件名)
只需在使用的位置調(diào)用組件標簽名即可
局部組件使用:(需要使用的vue文件中)
import 組件名 form '位置'
components:{
組件標簽名:組件名 //可以省略組件標簽名
}
Vue-cli css作用域
<style scoped>
</style>
只需在style后添加scoped即可
父傳值子組件
1.子組件在props中創(chuàng)建一個屬性，用以接收父組件傳過來的值
2.父組件中注冊子組件
3.在子組件標簽中添加子組件props中創(chuàng)建的屬性,把需要傳給子組件的值賦給該屬性
props: {
屬性名:{
type:數(shù)據(jù)類型(String,Number...)
}
}
子組件代碼(第一步)
<組件標簽名 :子組件props創(chuàng)建的屬性名="父組件中值">
父組件代碼(第三步)
Vue-cli 傳值和傳引用
傳值:String,Number,Boolean... 改變一個地方數(shù)據(jù),其他數(shù)據(jù)不變
傳引用:Array,Object 改變一個地方數(shù)據(jù),所有跟引用相關(guān)的數(shù)據(jù)都會改變
Vue-cli 子傳值父組件
1.子組件中需要以某種方式例如點擊事件的方法來觸發(fā)一個自定義事件
2.將需要傳的值作為$emit的第二個參數(shù)，該值將作為實參傳給響應自定義事件的方法
3.在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監(jiān)聽
function(){
this.&emit("自定義方法名","值")
}
子組件代碼(第二步)
<標簽名 @子組件自定義的方法名="方法名($event)" >
methods:{
方法名:function(data){
this.name=data
}
}
