关于vue中的父子传参

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

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>

三、子组件接收父组件的方法(props)

1)
props:{
title:String
}

2) props:{
title:{
type:String, // 期待是一个String
required:true, // 要求父必须传递传递
}
}

3)props:{
title:{
type:String,
// required:true, // 要求父必须传递数据
default:“这是一个默认值”//当父没有传递数据时,显示这个
}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值