1.組件和模塊的區(qū)別
- 模塊化： 是從代碼邏輯的角度進(jìn)行劃分的蛀柴；方便代碼分層開(kāi)發(fā)比然，保證每個(gè)功能模塊的職能單一囤攀；
- 組件化： 是從UI界面的角度進(jìn)行劃分的软免；前端的組件化，方便UI組件的重用焚挠；
2.全局組件
使用Vue.extend來(lái)創(chuàng)建全局組件
創(chuàng)建組件的第一種方法：
var com1=Vue.extend({
template:'<h3>呵呵</h3>';
);
Vue.component("mycom1",com1);
創(chuàng)建組件的第二種方法：
Vue.componnent("mycom2",{
template:'<h3>呵呵</h3>';
});
創(chuàng)建組件的第三種方法：
//在實(shí)例對(duì)象的外面定義模板
<template id="con">
<h3>呵呵</h3>
</template>
Vue.componnent("mycom3",{
template:'#con';
});
屬性：
template指定了組件展示的結(jié)構(gòu)膏萧，里面有且只能有1個(gè)根元素
注意點(diǎn)：
創(chuàng)建組件時(shí)可以用駝峰命名法，但是在使用的時(shí)候要改為"-"
3.私有組件
定義實(shí)例私有組件：
var vm= Vue({
components:{
login:{
template:'<h3>呵呵</h3>';
}
}
});
4.組件傳值
父?jìng)髯?/h5>
屬性：父組件，可以在引用子組件的時(shí)候榛泛， 通過(guò) 屬性綁定（v-bind:） 的形式, 把 需要傳遞給 子組件的數(shù)據(jù)蝌蹂，以屬性綁定的形式，傳遞到子組件內(nèi)部曹锨，供子組件使用
<div id="app">
//a綁定父組件數(shù)據(jù)msg
<do :a="msg"></do>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: "組件傳值"
},
components: {
do: {
data() {
return {
m: "貪玩藍(lán)月",
n: "真好"
}
},
template: '<h1>{{m}}===學(xué)習(xí)了==={{a}}===<do2 :b="n"></do2></h1>',
props: ["a"],// 把父組件傳遞過(guò)來(lái)的 parentmsg 屬性孤个，先在 props 數(shù)組中，定義一下沛简，這樣齐鲤，才能使用這個(gè)數(shù)據(jù)
components: {
do2: {
data() {
return {
s: "我想"
}
},
template: "<span>{{s}}==={}</span>",
props: ["b"]
}
}
}
}
})
</script>
方法：父組件向子組件 傳遞 方法椒楣，使用的是 事件綁定機(jī)制给郊； v-on, 當(dāng)我們自定義了 一個(gè) 事件屬性之后，那么捧灰，子組件就能夠丑罪，通過(guò)某些方式，來(lái)調(diào)用 傳遞進(jìn)去的 這個(gè)方法了
子傳父
先父?jìng)髯臃椒ǚ锉冢缓笞訑y帶參數(shù)給父吩屹，完成傳參
<div id="app">
{{shuju}}
<!--子通過(guò)事件綁定定義一個(gè)事件屬性-->
<con1 @temp="show"></con1>
</div>
<template id="con1">
<!--子通過(guò)點(diǎn)擊事件向父?jìng)髦?->
<input type="button" @click="dian" value="www">
</template>
<script>
Vue.component('con1', {
template: '#con1',
data() {
return {
msg: "嘻嘻哈哈"
}
},
methods: {
dian() {
// 當(dāng)點(diǎn)擊子組件的按鈕的時(shí)候，如何 拿到 父組件傳遞過(guò)來(lái)的 func 方法拧抖，并調(diào)用這個(gè)方法煤搜？？唧席？
// emit 英文原意： 是觸發(fā)擦盾，調(diào)用、發(fā)射的意思淌哟，后面參數(shù)是攜帶的參數(shù)
this.$emit("temp", this.msg)
}
}
})
var vm = new Vue({
el: '#app',
data: {
shuju: ""
},
methods: {
show(data) {
//父獲取子傳過(guò)來(lái)的攜帶參數(shù)迹卢，然后賦值給自己的數(shù)據(jù)
console.log('ok');
console.log(data)
this.shuju = data;
}
}
})
獲取DOM
通過(guò)實(shí)例的ref可以獲取dom元素
