vue 子元件和父元件

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>