自學Vue的第04天
元件化開發
區域性元件
<div id="app"></div>
<script></script>
複製程式碼1、這裡的註冊區域性元件的時候，沒有使用鍵值對，預設k-v相等
2、這裡的建立區域性元件的時候，其實用了個語法糖，完整的寫法其實是
var MyFooter = Vue.extend({
template: `
<div>我是MyFooter</div>
`
})
複製程式碼全域性元件
Vue.component('MyLow', {
template: `
<div>我是MyLow</div>
`
})
new Vue({
el: '#app',
//註冊區域性元件
components: {
MyHeader, MyBody, MyFooter
},
template: `
<div>
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
<my-low></my-low>
</div>
`,
data: function () {
return {}
}
})
複製程式碼全域性元件，使用的時候無需宣告
完整程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件化開發</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app"></div>
<script></script>
</body>
</html>
複製程式碼slot插槽、ref、parent
slot舉例
<script></script>
複製程式碼如果父元件中沒有slot，那麼在使用的時候<div>我是插槽內容</div>是不會被渲染的
slot還可以指定名稱
var Parent={
template: `
<div>我是父元件<slot name="hello"></slot></div>
`
}
new Vue({
el: '#app',
components:{
Parent
},
template: `
<div>
<parent>
<div>我是插槽內容</div>
<div slot="hello">我是插槽內容2</div>
</parent>
</div>
`,
data: function () {
return {}
}
})
</script>
複製程式碼指定名稱的內容才進行渲染
$ref
<script></script>
複製程式碼$parent
就好像使用$refs獲取到子元件的資訊，
我們可以使用$parent獲取到父元件的資訊
var Child = {
template: `
<div>我是子元件</slot></div>
`,
created:function(){
console.log(this.$parent);
}
}
複製程式碼元件的通訊
- 父子元件通訊
- 非父子元件通訊
父傳子
<script>
var Child = {
//第三步：子元件使用父元件傳遞過來的資料
template: `
<div>我是子元件：{{sendChild}}</div>
`,
//第一步：子元件接收父元件引數的名稱
props:['sendChild']
}
var Parent = {
//第二步：通過特定名稱的屬性，傳遞資料給子元件
template: `
<div>
我是父元件
<child sendChild="父元件給的"></child>
</div>
`,
components: {
Child
}
}
new Vue({
el: '#app',
components: {
Parent
},
template: `
<div>
<parent>
</parent>
</div>
`,
data: function () {
return {}
}
})
</script>
複製程式碼
子傳父
非父子元件
<script type="text/javascript">
Vue.prototype.$bus=new Vue()
var MyHeader={
template:`
<div>
我是頭部
{{ headermsg }}
</div>
`,
data(){
return {
headermsg:'我是頭部的資訊'
}
},
created(){
// var self=this
// self.$bus.$on('sending',function(val){
// self.headermsg=val
// })
this.$bus.$on('sending',val=>{
this.headermsg=val
})
}
}
var MyBody={
template:`
<div>我是身體</div>
`,
}
var MyFooter={
template:`
<div>我是底部<button @click='sendhead'>我要跟頭部通訊</button></div>
`,
methods:{
sendhead(){
this.$bus.$emit('sending','我是底部的資料')
}
}
}
new Vue({
el:'#app',
components:{
MyHeader,
MyBody,
MyFooter
},
template:`
<div>
<my-header></my-header><hr>
<my-body></my-body><hr>
<my-footer></my-footer>
</div>
`,
data(){
return {}
},
})
</script>
複製程式碼Vue生命週期
