Vue（2）- v-model、局部組件和全局組件、父子組件傳值、平行組件傳值
阿新 • • 發佈：2019-02-17
star component handle lec 開發 div 復制 line 定義
一、表單輸入綁定（v-model 指令）
可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。
詳細用法參見官方文檔：https://cn.vuejs.org/v2/guide/forms.html
二、局部組件和全局組件
1、了解根組件template模板的優先級大於el，如下方式驗證：
<div id="app"> {{ msg }} </div>
<script> // 如果僅僅是實例化vue對象中 既有el 又有template， //如果template中定義了模板的內容 那麽template模板的優先級大於el new Vue({ el: ‘#app‘, data() { return { msg:‘alex‘ } }, template: ` <div class="app"> // 通過控制臺可看到顯示了template中定義的div <h2>{{ msg }}</h2> </div> ` })</script>
2、局部組件的使用（聲子，掛子，用子）
<div id="app"> <App></App> </div>
<script> // 聲明一個組件 相當於自定義一個標簽 因此名字首字母要大寫 跟已有標簽區分 // 局部組件 除了沒有el屬性 其他屬性都與根組件（Vue實例化對象）一樣 // 另外 組件中的data一定是一個函數 且必須有返回值 // 1、聲明子組件 let App = { data(){ return { text:"我是局部組件App" } }, // 當前組件template中的標簽與該組件的屬性有關，跟其他組件無關 // 子組件的template一定要寫 根組件(有el屬性)的template可以不寫 用el // 組件的template中一定要用一個標簽包含，也可以給他掛載子組件，並使用 template:` <div> <h2>{{ text }}</h2> </div> ` }; new Vue({ el: ‘#app‘, data() { return { msg:‘alex‘ } }, // 3、template中使用子組件 也可以不定義template屬性 直接在el中使用 // 以標簽的形式 如<App />或者<App></App> template: ` <div class="app"> <App /> </div> `, // 屬性components用來掛載子組件 components:{ // 2、掛載子組件App（可以掛載多個子組件 用逗號隔開依次書寫即可） App // 相當於App:App 如果鍵值一樣,可以只寫一個 } }) </script>
總結：
1）一個子組件掛載到哪個組件，這個組件就是我的父組件；
2）以後模塊化開發時，一個組件就是一個文件（一個組件包含了html，css，js），想使用這個組件時導入即可使用
3、全局組件的使用
<div id="app">
<!-- 使用局部組件App和Vheader -->
<App></App>
<Vheader></Vheader>
</div>
<script>
// 使用component方法 聲明一個全局組件 全局組件不需要掛載 任一組件可使用
// 第一參數是組件的名字 第二個參數是options
Vue.component(‘VBtn‘,{
data(){
return {
}
},
template:`
<button>按鈕</button>
`
});
// 聲明一個局部組件Vheader
let Vheader = {
data(){
return {
text:"我是局部組件Vheader"
}
},
// 使用全局組件VBtn
template:`
<div class="vheader">
<h2>{{ text }}</h2>
<VBtn></VBtn>
</div>
`
};
// 聲明一個局部組件
let App = {
data(){
return {
text:"我是局部組件App"
}
},
// 使用全局組件VBtn
template:`
<div class="app">
<h2>{{ text }}</h2>
<VBtn></VBtn>
</div>
`
};
new Vue({
el: ‘#app‘,
data() {
return {
}
},
components:{
App, // 掛載局部組件App
Vheader // 掛載局部組件Vheader
}
})
</script>
補充：使用vue內置組件slot分發內容從而自定義按鈕的值，代碼修改如下：
Vue.component(‘VBtn‘,{ data(){ return { } }, template:` <button><slot></slot></button> ` }); // 聲明一個局部組件Vheader let Vheader = { data(){ return { text:"我是局部組件Vheader" } }, // 使用全局組件VBtn template:` <div class="vheader"> <h2>{{ text }}</h2> <VBtn>登錄</VBtn> </div> ` };
三、父子組件之間傳值
1、父組件往子組件傳值
<div id="app">
<App></App> <!-- 使用局部組件App -->
</div>
<script>
// 聲明一個局部組件Vheader
let Vheader = {
data(){
return {
}
},
// 掛載父組件的屬性，該組件中就可以使用，從父組件接收到的值也可再傳給其子組件
props:[‘msg‘,‘post‘],
template:`
<div class="vheader">
<h2>子組件Vheader start</h2>
<p>{{ msg }}</p>
<p>{{ post.title }}</p>
<h2>子組件Vheader end</h2>
</div>
`
};
// 聲明一個局部組件App
let App = {
data(){
return {
text:"我是父組件App的數據",
app_post:{
id: 1,
title: ‘hello world‘
}
}
},
//
template:`
<div class="app">
<Vheader :msg=‘text‘ :post=‘app_post‘></Vheader>
</div>
`,
components:{
Vheader // 掛載局部組件Vheader
}
};
new Vue({
el: ‘#app‘,
data() {
return {
}
},
components:{
App // 掛載局部組件App
}
})
</script>
總結：
1）在子組件中使用props聲明，就可以在該組件中使用；
2）從父組件中接收到的值也可以傳遞給他的子組件；
3）父組件中綁定自定義的屬性；
2、子組件往父組件傳值
<div id="app">
<App></App> <!-- 使用局部組件App -->
</div>
<script>
// 聲明一個全局組件VBtn
Vue.component(‘VBtn‘,{
data(){
return {}
},
props:[‘id‘], // 父組件Vheader傳遞過來的值
template:`
<button @click="clickHandler">{{ id }}</button>
`,
methods:{
clickHandler(){
console.log(this); // 每個組件中的this指的是當前組件對象
// this.$emit(‘父組件中聲明的自定義的事件‘, ‘ 傳值‘)
this.id++;
this.$emit(‘click_Handler‘, this.id);
}
}
});
// 聲明一個局部組件Vheader
let Vheader = {
data(){
return {}
},
props:[‘post‘], // 父組件App傳遞過來的數據
template:`
<div class="vheader">
<VBtn :id=‘post.id‘ @click_Handler="fuClickHandler"></VBtn>
</div>
`,
methods:{
fuClickHandler(val){
this.$emit(‘fatherHandler‘, val) // 往父組件App傳值
}
}
};
// 聲明一個局部組件App
let App = {
data(){
return {
app_post:{
id: 1,
title: ‘hello world‘
}
}
},
template:`
<div class="app">
{{ app_post.id }}
<Vheader :post=‘app_post‘ @fatherHandler="father_handler"></Vheader>
</div>
`,
methods:{
father_handler(val){
this.app_post.id = val
}
},
components:{
Vheader // 掛載局部組件Vheader
}
};
new Vue({
el: ‘#app‘,
data() {
return {}
},
components:{
App // 掛載局部組件App
}
})
</script>
總結：
1）子組件中，通過this.$emit(‘父組件中自定義的事件名‘, ‘值‘)，來觸發父組件中自定義的事件；
2）父組件中自定義事件（當前事件中接收子組件的），並為對應的子組件綁定（v-on）自定義的事件；
五、平行組件之間傳值
<div id="app">
<App></App> <!-- 使用局部組件App -->
</div>
<script>
// TestA ==》 TestB 傳值
// 平行組件傳值前提：這兩個方法必須綁定在同一個實例化對象(bus)上
let bus = new Vue(); // 聲明一個Vue對象，只是用來平行組件間傳值
// TestB要聲明事件 bus.$on(‘事件的名字‘, function(val){})
// TestA要觸發事件 bus.$emit(‘TestA組件中聲明的事件名‘, ‘值‘)
// 聲明一個全局組件TestB
Vue.component(‘TestB‘,{
data(){
return {
text: ""
}
},
template:`
<h2>{{ text }}</h2>
`,
created(){
// 聲明事件
bus.$on(‘testData‘, (val) => { // 註意這裏用箭頭函數
this.text = val
})
}
});
// 聲明一個全局組件TestA
Vue.component(‘TestA‘,{
data(){
return {
msg: "我是子組件TestA的數據"
}
},
template:`
<button @click="clickHandler">TestA組件中按鈕</button>
`,
methods:{
// 定義觸發的函數
clickHandler(){
console.log(bus);
bus.$emit(‘testData‘, this.msg)
}
}
});
// 聲明一個局部組件Vheader
let Vheader = {
data(){
return {}
},
template:`
<div class="vheader">
<TestA></TestA>
<TestB></TestB>
</div>
`,
};
// 聲明一個局部組件App
let App = {
data(){
return {}
},
template:`
<div class="app">
<Vheader></Vheader>
</div>
`,
components:{
Vheader // 掛載局部組件Vheader
}
};
// 根組件，可以沒有template屬性，直接在el中使用子組件
new Vue({
el: ‘#app‘,
data() {
return {}
},
components:{
App // 掛載局部組件App
}
})
</script>
總結：（以A->B傳值為例）
1）聲明一個Vue對象（bus對象），只是用來平行組件間傳值；
2）B要聲明事件 bus.$on(‘事件的名字‘, function(val){})；
3）A要觸發事件 bus.$emit(‘TestA組件中聲明的事件名‘, ‘值‘)；
4）註意：記住平行組件傳值前提是這兩個方法必須綁定在同一個實例化對象(bus)上；
六、補充知識點
1、關於this指向的問題，與vm實例沒有任何關系，而是與箭頭函數和普通函數的區別。總結兩點：
1）es5的普通函數，this指向是指向了調用者，比如vue實例的方法（在methods中聲明了一個方法）是由vue實例vm調用的，所以this指向vm。
2）箭頭函數的this指向它的調用者所在的上下文，也就是vm實例所在的上下文（定義vm的父類），即window。
2、vuejs官網中的組件註冊部分解讀
3、將vue添加至chorme
FQ！！！
Vue（2）- v-model、局部組件和全局組件、父子組件傳值、平行組件傳值