一、組件的注冊
組件注冊需要注意的有五點：
1、data要寫成函式，并且用return回傳一個值，這樣不同的呼叫才能互不影響
2、template后面跟的是飄號，就是Tab上面那個鍵
3、template后面的內容要寫在一個大的div里面，不要分開多個div
4、props后面的是陣列，因為有很多個prop
5、要保存成js檔案
Vue.component("myson",{
data(){
return{
sonmsg:"hello son"
}
},
template:`
<div>
<p>子組件內容</p>
prop接收到的值：{{sonprop}}
</div>
`,
props:["sonprop"],
methods:{
sonclick(){
this.$emit("sonemit",this.sonmsg)
}
}
})二、組件的使用
使用時只要注意一點就好，要先參考vue，再參考子組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="00-組件-子.js"></script>
</head>
<body>
<div id="app">
<myson></myson>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
parentmsg:"parentmsg to sonprop"
}
})
</script>
</body>
</html>三、父傳子
父傳子比較簡單，分成兩步
1、在組件里定義prop
props:["sonprop"]2、使用組件時，用定義的prop系結父的值
<myson :sonprop="parentmsg"></myson>父里面的值是這樣的
data:{
parentmsg:"parentmsg to sonprop"
}詳細傳遞程序是這樣的，看起來比較復雜，其實就上面說的兩步
四、子傳父
子組件給父傳數值要通過方法來傳遞，父和子各定義一個方法，然后用一個中間方法來連接，記住這個中間方法的使用就行了，步驟詳細分解開挺多的
1、在子組件的template的button里使用一個點擊事件
<button @click="sonclick">按鈕</button>2、在子組件里定義上面使用的方法，觸發一個中間方法并傳遞資料
sonclick(){
this.$emit("sonemit",this.sonmsg)
}3、父使用子組件時，用中間方法系結自己的方法
<myson @sonemit="parentclick"></myson>4、在父的方法里接收資料，這里p可以寫成任意字符
parentclick(p){
vm.parentmsg=p;
}詳細代碼圖
運行效果
五、插槽
1、加入插槽，插槽就是在組件里留一個空位，使用組件時可以插入任意東西
在子組件某個位置定義：<slot></slot>
使用組件時就可以在該位置添加任意標簽
2、加入多個插槽時，要為每個插槽命名，使用時每個slot要放在一個template里面
定義多個插槽
template:`
<div>
<p>子組件內容:{{sonmsg}}</p>
<p>分隔線111111111111111</p>
<slot name="a1"></slot>
<p>分隔線2222222</p>
<slot name="a2"></slot>
<p>分隔線333333333</p>
</div>
`,使用多個插槽，一個template放一個slot
<template slot="a1">
<button>按鈕a1</button>
</template>
<template slot="a2">
<button>按鈕a2</button>
</template>六、子組件給插槽傳值
1、在子組件template里定義中間資料emitmsg，名字可以隨便
<slot name="a1" :emitmsg="sonmsg"></slot>2、在父組件里用res接收，不管是多少個子組件，都是用res接收，res是結果集，如果有多個slot的話，資料都會在里面
<template slot="a1" slot-scope="res">
{{res.emitmsg}}
</template>代碼展示
顯示效果：
今天看了下資料，突然多了70個粉絲，嘿嘿，誰幫我刷的，謝謝
然后順手點了個CSDN彈出的調查，本來想順手做下的，結果看了第一項就關掉了，原來我啥也不會
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335159.html
標籤：其他
上一篇：vue中echarts使用記錄