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>