初识vue(8)——父子组件通信示例

最新推荐文章于 2022-11-02 17:55:38 发布

源魔方

最新推荐文章于 2022-11-02 17:55:38 发布

阅读量90

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45149720/article/details/108763770

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

父传子

子组件中设置props属性，去接收父组件数据。为什么要设置属性去接收？因为v-bind指令就是动态的给值，v-bind:子组件属性变量=“父组件存放数据变量”。

子传父

子组件￥emit发射事件，并且携带参数一起发射。父组件在外部用v-on接收发送的事件和传出的值。

怎么区分父子组件？

我自己的理解：
1.父组件包含子组件
2.子组件可能父组件中注册（局部注册）
3.子组件会出现在父组件中
4.如果app去实例化vue，即app是所有组件的根组件。

下面是一个示例，大概是父组件把number1、number2的数据传给子组件。在子组件prop中用dnumber1、dnumber2去接收，然后用data里面retrun的cnumber1、cnumber2存储数据。子组件中有2个input输入框，分别绑定cnumber1、cnumber2，实现响应式交互，然后新输入的数据cnumber1、cnumber1，又传给父组件，父组件用number1、number2去接收。

虽然感觉绕了一点，但是理清后发现父子通信也就这样不太难。

v-bind和v-on(v-model)方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <cpn :dnumber1="number1" :dnumber2="number2" @item-click1="changenumber1" @item-click2="changenumber2"></cpn>
    <h1>父组件数据</h1>
<!--    vue实例里面的数据-->
    <h1>{{number1}}</h1>
    <h1>{{number2}}</h1>
</div>
</body>
<template id="my-cpn">
    <div>
        <h1>父传给子的数据</h1>
<!--        父传给子的数据（vue传给cpn的数据）,存放在props里面的数据-->
        <h1>{{dnumber1}}</h1>
        <h1>{{dnumber2}}</h1>
        <h1>cpn data里面的数据</h1>
<!--        cpn data里面的数据-->
        <h1>{{cnumber1}}</h1>
<!--        <input type="text" v-model="cnumber1">-->
        <input type="text" :value="cnumber1" @input="changeinput1">
        <h1>{{cnumber2}}</h1>
<!--        <input type="text" v-model="cnumber2">-->
        <input type="text" :value="cnumber2" @input="changeinput2">
    </div>
</template>
<script>
    const cpn = {
        template:'#my-cpn',
        props:{
            dnumber1:Number,
            dnumber2:Number,
        },
        data(){
            return{
                cnumber1:this.dnumber1,
                cnumber2:this.dnumber2,
            }
        },
        methods: {
            changeinput1(event){
                this.cnumber1=event.target.value;
                this.$emit('item-click1', this.cnumber1);
            },
            changeinput2(event){
                this.cnumber2=event.target.value;
                this.$emit('item-click2', this.cnumber2);
            }
        },
    }

    Vue.component("cpn",cpn);

    const app = new Vue({
        el:'#app',
        data:{
            message:"Shu",
            number1:1,
            number2:2,
        },
        methods:{
            changenumber1(e){
                this.number1 = e*1;
            },
            changenumber2(e){
                this.number2 = e*1;
            }
        }
    })
</script>
</html>

注意这里子组件发射事件和值后，对应在父组件中接收的函数，不能有()括号，但是里面有一个默认参数，这里我用的e（这个用什么都行），关于函数里面的e*1,主要是将string转换成number类型，默认传出来的都是string。

v-model和watch方法

上面示例是将v-model才分成v-bind和v-on做的，v-model也能直接用，涉及的vue中的另一个实现watch观察者
下面是用watch做的，代码简单很多：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <cpn :dnumber1="number1" :dnumber2="number2" @item-click1="changenumber1" @item-click2="changenumber2"></cpn>
    <h1>父组件数据</h1>
    <!--    vue实例里面的数据-->
    <h1>{{number1}}</h1>
    <h1>{{number2}}</h1>
</div>
</body>
<template id="my-cpn">
    <div>
        <h1>父传给子的数据</h1>
        <!--        父传给子的数据（vue传给cpn的数据）,存放在props里面的数据-->
        <h1>{{dnumber1}}</h1>
        <h1>{{dnumber2}}</h1>
        <h1>cpn data里面的数据</h1>
        <!--        cpn data里面的数据-->
        <h1>{{cnumber1}}</h1>
        <input type="text" v-model="cnumber1">
<!--        <input type="text" :value="cnumber1" @input="changeinput1">-->
        <h1>{{cnumber2}}</h1>
        <input type="text" v-model="cnumber2">
<!--        <input type="text" :value="cnumber2" @input="changeinput2">-->
    </div>
</template>
<script>
    const cpn = {
        template:'#my-cpn',
        props:{
            dnumber1:Number,
            dnumber2:Number,
        },
        data(){
            return{
                cnumber1:this.dnumber1,
                cnumber2:this.dnumber2,
            }
        },
        watch:{
            cnumber1(newvalue){
                this.cnumber1=newvalue;
                this.$emit('item-click1', this.cnumber1);
            },
            cnumber2(newvalue){
                this.cnumber2=newvalue;
                this.$emit('item-click2', this.cnumber2);
            },
        },
        // methods: {
        //     changeinput1(event){
        //         this.cnumber1=event.target.value;
        //         this.$emit('item-click1', this.cnumber1);
        //         console.log("发射1",this.cnumber1);
        //     },
        //     changeinput2(event){
        //         this.cnumber2=event.target.value;
        //         this.$emit('item-click2', this.cnumber2);
        //         console.log("发射2",this.cnumber2);
        //     }
        // },
    }

    Vue.component("cpn",cpn);

    const app = new Vue({
        el:'#app',
        data:{
            message:"Shu",
            number1:1,
            number2:2,
        },
        methods:{
            changenumber1(e){
                this.number1 = e*1;
            },
            changenumber2(e){
                this.number2 = e*1;
            }
        }
    })
</script>
</html>

watch观察者的主要功能是监视变化的量，如果发生变化，则执行函数里面的内容。这里watch里面对2个值进行了观察cnumber1、cnumber2，如果这2个值发生了变化则，执行里面的代码。wacth里面都有一个参数就是变化后的值，这里统称新值。

源魔方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识vue(8)——父子组件通信示例

父传子子组件中设置props属性，去接收父组件数据。为什么要设置属性去接收？因为v-bind指令就是动态的给值，v-bind:子组件属性变量=“父组件存放数据变量”。子传父子组件￥emit发射事件，并且携带参数一起发射。父组件在外部用v-on接收发送的事件和传出的值。怎么区分父子组件？我自己的理解：1.父组件包含子组件2.子组件可能父组件中注册（局部注册）3.子组件会出现在父组件中4.如果app去实例化vue，即app是所有组件的根组件。下面是一个示例，大概是父组件把number1、nu
复制链接

扫一扫