关于vue中的父子传参

最新推荐文章于 2024-08-20 11:35:11 发布

前端神棍

最新推荐文章于 2024-08-20 11:35:11 发布

阅读量423

点赞数

文章标签： vue html vue.js

本文链接：https://blog.csdn.net/m0_46412825/article/details/110817538

版权

一、自定义属性和自带属性

1、由于父传子依赖的是自定义属性，子传父依赖的是自定义事件。所以分清什么是自定义，什么是自带，对于学会vue，至关重要。

自定义属性如下：

(1)

 <h1 title="xxx" id="box">hello vue</h1>

    title="xxx" 是属性节点  是html中自带的属性
    id="box" 是属性节点  是html中自带的属性

(2)

 <h1 abc="xxx">hello vue</h1>

    abc="xxx" 自定义属性节点 我们自己创造的属性节点，不是html自带

(3)

 <Father abc="yyy"><Father>

    Father叫自定义标签，Father叫组件
    abc="yyy" 自定义属性节点 我们自己创造的属性节点，不是html自带

(4)

 <Father title="hello" id="box"><Father>

     title="hello"  也叫自定义属性节点
     id="box" 也叫自定义属性节点

自定义事件如下：

（1）

<button click="alert(123)">登录</button>

click="alert(123)"  html标签中天生的事件   DOM中的事件绑定

（2）

<button @click="alert(123)">登录</button>

@click="alert(123)"  html标签中天生的事件   vue中的事件绑定

（3）

 <button @abc="alert(123)">登录</button>

@abc="alert(123)"  html标签中的自定义事件   vue中的事件绑定   事件名就是abc

（4）

<Father @click="alert(123)"></Father>

@click="alert(123)" 组件中自自定义事件 事件名是click

（5）

 <Father @abc="alert(123)"></Father>

 @abc="alert(123)" 组件中自自定义事件 事件名是abc

二、父组件中的数据传递给子组件

1、父传子：核心靠自定义属性。

2、步骤：

1）在父组件模板中使用子组件的位的属性位置绑定父组件中的数据
<Son :abc="fatherData"></Son> 这里面的冒号的作用:传递数据，不加冒号传递的是字符串：fatherData

2）在子组件对象中通过props接收数据

let Son = {
template:"#son",
props:{
/* abc表示子组件接收的数据 String表示子组件期待的数据是一个字符串，如果不是字符串，就会警告*/
abc:String
}
}
3）接收完数据，就可以使用之，在子组件模板中使用
<template id="son">
        <div>
               <h3>Son组件==>{{ abc }}</h3>
          </div>
       </template>

3、案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <Father></Father>
</div>

<!--Father组件的模板-->
<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>

        <!--abc="fatherData"是自定义属性 属性名是abc  属性值是fatherData这个字符串-->
        <!--<Son abc="fatherData"></Son>-->

        <!--:abc="fatherData" 也是自定义属性节点 属性名是abc 属性值是fatherData这个数据-->
        <Son :abc="fatherData"></Son>
    </div>
</template>

<!--Son组件的模板-->
<template id="son">
    <div>
        <h3>Son组件---->{{ abc }}</h3>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    // 定义Son组件
    let Son = {
        template:"#son",
        props:{
            /* abc表示子组件接收的数据 String表示子组件期待的数据是一个字符串，如果不是字符串，就会警告*/
            abc:String
        }
    }

    // 定义Father组件
    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

三、子组件中的数据传递给父组件

1、父传子：核心靠自定义事件。

2、代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <h3>Fahter组件---->{{ dataFromSon }}</h3>
        <!-- @hello="f" 组件上面的自定义事件  事件名叫hello -->
        <!-- 当hello事件发生时，就调用f监听器 -->
        <!-- 现在是在father这个模板中，f监听器就需要写在Faher组件对象中 -->
        <!-- 给Son上面绑定了一个自定义事件，在son组件内部就可以触发自定义事件-->
        <!--如何触发hello事件，需要我们写代码来触发-->
        <Son @hello="f"></Son>
    </div>
</template>

<template id="son">
    <div>
        <h3>Son组件---->{{ sonData }}</h3>
        <!--@click="g" vue中绑定天生的点击事件(需要鼠标去点击就会触发天生的点击事件)-->
        <button @click="g">点我</button>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    let Son = {
        template:"#son",
        data(){ return { sonData:"Son组件中的数据" } },
        methods:{
            g(){
                // this表示Son组件对象
                // $emit表示触发一个自定义事件
                // this.$emit("hello");

                // 在使用$emit触发hello事件时，可以带上数据
                this.$emit("hello",this.sonData)
            }
        }，
    }

    let Father = {
        template:"#father",
        data(){ return { dataFromSon:"" } },
        methods:{
            f(msg){ // msg是就是指当hello事件触发时，触发时人家给你传递的数据
                console.log(msg)
                this.dataFromSon = msg;
            }
        },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>