Vue學習之路(六)---父元件與子元件之間的資料傳遞
阿新 • • 發佈:2018-11-12
前面我講了基本元件的寫法,現在一起學下父元件怎樣傳遞資料到子元件,以及子元件傳遞資料到父元件的
1.父元件傳遞資料到子元件
1.1 通過props傳遞
父元件App.vue中
<component-a big-num=98></component-a>//傳遞big-num
父元件原始碼
<template>
<div id="app">
<!--<input type="text" v-model="value"/>-->
<component-a big-num=98 ></component-a>
</div>
</template>
<script>
import Vue from 'Vue'
import componentA from './components/a'
export default {
components: {componentA},
name: 'app',
data () {
return {
value: '',
valueArr: [],
msg: 'Welcome to Your Vue.js App',
name: 'Julian' ,
sex: 'Man',
age: 18,
isClassA: true,
isClassB: false,
hasErr:false,
html: '<span style="color: red">第一個</span>',
listArr: [
{
name: 'a',
age: 18
},
{
name: 'b',
age: 19
},
{
name: 'c' ,
age: 20
}],
listObj: {age: 18,name: 'zs',sex: 'man'},
classArr: ['classA','classB'],
classObj: {'classA': true}
}
},
methods: {
add: function (){
this.listArr.push({
name: 'd',
age: 100
});
Vue.set(this.listArr,0,{name:'ls',age:150});
this.hasErr = !this.hasErr;
},
comA (msg) {
console.log(msg);
},
getNum (newVal, oldVal) {
console.log('得到資料了');
console.log('newVal----'+ newVal +';oldVal-----'+oldVal);
}
},
computed: {
valueWithoutNum : function (){
return this.value.replace(/\d/g,'');
}
},
watch: {
value: function (newVal, oldVal) {
this.getNum(newVal, oldVal);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.classA {
color: red;
}
.classB {
background: blue;
}
</style>
子元件a.vue中
在子元件中需要用props來接收父元件傳過來的值,並且props可以可以用陣列,也可以用物件,陣列的話,看下面的程式碼就行了,如果是物件的話,props: {‘big-num’:[String,Number]}可以規定從父元件傳過來的資料的值型別
<template>
<div>{{msg}}
<button @click="emitEvent">myEvent</button>
{{bigNum}}
</div>
</template>
<script>
export default {
props: ['big-num'],
data () {
return {
msg: 'I am a template!Over',
}
},
methods: {
emitEvent () {
this.$emit('my-event',this.msg);
}
}
}
</script>
1.2 通過slot
卡槽的寫法,現在子元件定義slot
<template>
<div>{{msg}}
<button @click="emitEvent">myEvent</button>
{{bigNum}}
<slot name="header">this is header</slot>
<p>luan qi ba zao</p>
<slot name="footer">this is footer</slot>
</div>
</template>
然後在父元件中插入標籤,通過卡槽的name來指定插入到子元件的位置
<template>
<div id="app">
<!--<input type="text" v-model="value"/>-->
<component-a big-num='aaaa'>
<p slot="header">這是我插入的header</p>
<p slot="footer">這是我插入的footer</p>
</component-a>
</div>
</template>
結果圖
2.子元件傳遞資料到父元件
子元件傳遞資料到父元件的方式是通過事件的形式。子元件中自定義一個事件,然後通知父元件監聽該事件,具體程式碼如下:
//子元件中
export default {
props: {'big-num': [String,Number]},
data () {
return {
msg: 'I am a template!Over',
}
},
methods: {
emitEvent () {
this.$emit('my-event',this.msg);//向父元件中傳遞my-event並且傳一個引數msg
}
}
}
//父元件中
<template>
<div id="app">
<!--<input type="text" v-model="value"/>-->
<component-a big-num='aaaa' @my-event="comA"><!--通過v-on也就是@來監聽my-event-->
<p slot="header">這是我插入的header</p>
<p slot="footer">這是我插入的footer</p>
</component-a>
</div>
</template>
//methods中
methods: {
comA (msg) {//接收子元件傳過來的事件和引數
console.log(msg);
}
}
3.動態更新元件
通過標籤包裹,其中屬性:is=’元件名’,當切換的時候可以用<keep-alive></keep-alive>
標籤包裹,這樣做是為在在切換元件的時候可以將上一個元件快取下來。
//html中
<keep-alive>
<p :is='comName'></p>
</keep-alive>
//data中
data(){
comName: 'com-a'//初始是com-a元件
}
//metods中
methods: {
changeCom () {
this.comName = 'com-b';//切換到元件com-b
}
}