vue 子組件和父組件

 作者QQ：1095737364    QQ群：123300273     歡迎加入！

1.添加子組件

　　1.父組件修改

<template>
<!-- v-for 表情表示循環輸出數據:必須要有父類dom,否則會出錯的-->
    <div>
        <div v-for="item in pageDate">
        <span v-text="item.id"></span>
        <span v-text="item.url"></span>
        <span v-text="item.href"></span>
        <button @click="detele()"> 刪除數據</button>
    </div>
    <button @click="add"> 添加數據</button>
    <button @click="update"> 修改數據</button>
    <child></child>
    </div>
</template>
<script>
var pageDate = [
    {
        id: 10000, //該廣告的ID
        url: 'http://163.com', //廣告圖片路徑
        href: 'http://baidu.com'//點擊跳轉連接
    },
    {
        id: 10002, //該廣告的ID
        url: 'http://163.com', //廣告圖片路徑
        href: 'http://baidu.com'//點擊跳轉連接
    }
    ]
import child from "../home/children/456"
export default {
    data () {
        return {
            pageDate
        }
    },
    props: {},
    computed: {},
    components: {child},
    methods: {
    add: function () {
    this.pageDate.push({
        id: 10003, //該廣告的ID
        url: 'http://163.com', //廣告圖片路徑
        href: 'http://baidu.com'//點擊跳轉連接
    })
    },
    update: function () {
        this.pageDate[1].id = 10000000000000000000
    },
    detele: function (index) {
        this.pageDate.splice(index, 1)
    }
},
watch: {},
}
</script>
 
<style scoped>
 
</style>
     

 

　　2.在此目錄下新建child文件夾,在child文件夾下建立456.vue文件

<template>
    <div class="child_vue">
        <p >這是孩子vue</p>
    </div>
</template>
<script>
export default {
    data () {
        return {}
    },
    props: {},
    computed: {},
    components: {},
    methods: {},
    watch: {},
}
</script>
<style scoped>
</style>

 

2.父類組件給子類組件傳遞參數

　　1.修改template的代碼:

　　　　<child :data="childDate"></child>

　　2.修改孩子組件456.vue的template代碼:

<template>
<div class="child_vue">
    <p >這是孩子vue</p>
    <span v-text="data.id"></span>
    <span v-text="data.url"></span>
    <span v-text="data.href"></span>
</div>
</template>v

 

　　3.修改孩子組件456.vue的props代碼:

　　　　props: ['data']

　　注意. 父類的 :data 和子組件的 props: ['data'] 名字要保持一致,父類增刪改子類數據和修改自己的數據是一樣使用的

3.子類組件給父類組件傳遞參數

　　1.子類組件:

<template>
    <div class="child_vue">
        <p >這是孩子vue</p>
        <span v-text="data.id"></span>
        <span v-text="data.url"></span>
        <span v-text="data.href"></span>
        <input v-model="username" @change="setUser">
    </div>
</template>
<script>
var message =
    {
    username:' '
    }
export default {
    data () {
        return {message}
    },
    props: ['data'],
    computed: {},
    components: {},
    methods: {
        setUser:function () {
            this.$emit('getChildData',this.username)
        }
    },
watch: {},
}
</script>
<style scoped>
</style>

 

　　2.父類組件

<template>
    <!-- v-for 表情表示循環輸出數據:必須要有父類dom,否則會出錯的-->
    <div>
        <div v-for="item in pageDate">
            <span v-text="item.id"></span>
            <span v-text="item.url"></span>
            <span v-text="item.href"></span>
            <button @click="detele()"> 刪除數據</button>
        </div>
        <button @click="add"> 添加數據</button>
        <button @click="update"> 修改數據</button>
        <child :data="childDate" @getChildData="getUser"></child>
        <p>{{user}}</p>
    </div>
</template>
<script>
var pageDate = [
{
id: 10000, //該廣告的ID
url: 'http://163.com', //廣告圖片路徑
href: 'http://baidu.com'//點擊跳轉連接
},
{
id: 10002, //該廣告的ID
url: 'http://163.com', //廣告圖片路徑
href: 'http://baidu.com'//點擊跳轉連接
}
]
var childDate =
{
id: 10002, //該廣告的ID
url: 'http://163.com', //廣告圖片路徑
href: 'http://baidu.com'//點擊跳轉連接
}
 
import child from "../home/children/456"
export default {
    data () {
        return {
            pageDate,childDate,user:""
        }
    },
    props:{},
    computed: {},
    components: {child},
    methods: {
    add: function () {
        this.pageDate.push({
            id: 10003, //該廣告的ID
            url: 'http://163.com', //廣告圖片路徑
            href: 'http://baidu.com'//點擊跳轉連接
    })
},
update: function () {
    this.childDate.id = 10000000000000000000
},
detele: function (index) {
    this.pageDate.splice(index, 1)
},
getUser:function (child_username) {
    this.user=child_username
}
},
watch: {},
}
</script>
 
<style scoped>
 
</style>