组件通信-父子组件的案例

最新推荐文章于 2022-05-27 09:21:25 发布

新手小白请求出战！

最新推荐文章于 2022-05-27 09:21:25 发布

阅读量153

点赞数 1

分类专栏：前端笔记文章标签： javascript vue.js html5 es6

本文链接：https://blog.csdn.net/qq_41138726/article/details/109787183

版权

前端笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

父传子

<body>
    <div id="app">
        <cpn :cnum1="num1" :cnum2="num2"></cpn>

    </div>
    <template id="cpn">
        <div>
            <h2>props:{{cnum1}}</h2>
            <h2>data:{{dnumber1}}</h2>
            <input type="text" v-model="dnumber1">
            <h2>props:{{cnum2}}</h2>
            <h2>data:{{dnumber2}}</h2>
            <input type="text" v-model="dnumber2">

        </div>
    </template>


    <script src="../vue.js"></script>
    <script>
        const cpn = {
            template: '#cpn',
            // 对象
            props: {
                cnum1: Number,
                cnum2: Number
            },
            // 组价中的data是函数，不是对象
            data() {
                return {
                    dnumber1: this.cnum1,
                    dnumber2: this.cnum2
                }
            }
        }
        const app = new Vue({
            el: "#app",
            data: {
                num1: 1,
                num2: 2
            },
            components: {
                cpn
            }
        })
    </script>
</body>

父传子和子传父双向绑定

<body>
    <div id="app">
        <cpn :cnum1="num1" :cnum2="num2" @num1change="num1change"  @num2change="num2change"></cpn>

    </div>
    <template id="cpn">
        <div>
            <h2>props:{{cnum1}}</h2>
            <h2>data:{{dnumber1}}</h2>
            <!-- <input type="text" v-model="dnumber1"> -->
            <input type="text" :value="dnumber1" @input="num1Input">
            <h2>props:{{cnum2}}</h2>
            <h2>data:{{dnumber2}}</h2>
            <!-- <input type="text" v-model="dnumber2"> -->
            <input type="text" :value="dnumber2" @input="num2Input">


        </div>
    </template>


    <script src="../vue.js"></script>
    <script>
        const cpn = {
            template: '#cpn',
            // 对象
            props: {
                cnum1: Number,
                cnum2: Number
            },
            // 组价中的data是函数，不是对象
            data() {
                return {
                    dnumber1: this.cnum1,
                    dnumber2: this.cnum2
                }
            },
            methods:{
                num1Input(event){
                    this.dnumber1=event.target.value;
                    this.$emit('num1change',this.dnumber1)

                },
                num2Input(event){
                    this.dnumber2=event.target.value
                    this.$emit('num2change',this.dnumber2)

                },

            }
        }
        const app = new Vue({
            el: "#app",
            data: {
                num1: 1,
                num2: 2
            },
            components: {
                cpn
            },
            methods:{
                num1change(value){
                    // 把字符串转换为数字
                    // this.num1=value*1;
                    this.num1=parseInt(value);

                },
                num2change(value){
                    this.num2=parseInt(value);
                },
            }
        })
    </script>
</body>

终结版！！！

<body>
    <div id="app">
        <cpn :cnum1="num1" :cnum2="num2" @num1change="num1change"  @num2change="num2change"></cpn>

    </div>
    <template id="cpn">
        <div>
            <h2>props:{{cnum1}}</h2>
            <h2>data:{{dnumber1}}</h2>
            <!-- <input type="text" v-model="dnumber1"> -->
            <input type="text" :value="dnumber1" @input="num1Input">
            <h2>props:{{cnum2}}</h2>
            <h2>data:{{dnumber2}}</h2>
            <!-- <input type="text" v-model="dnumber2"> -->
            <input type="text" :value="dnumber2" @input="num2Input">


        </div>
    </template>


    <script src="../vue.js"></script>
    <script>
        const cpn = {
            template: '#cpn',
            // 对象
            props: {
                cnum1: Number,
                cnum2: Number
            },
            // 组价中的data是函数，不是对象
            data() {
                return {
                    dnumber1: this.cnum1,
                    dnumber2: this.cnum2
                }
            },
            methods:{
                num1Input(event){
                    // 1.将input中的value赋值到dnumber中
                    this.dnumber1=event.target.value;
                    // 2.为了让父组件可以修改值，发出一个事件
                    this.$emit('num1change',this.dnumber1)

                    // 同时修改dnumber1的值  下面是上面的一百倍
                    this.dnumber2=this.dnumber1*100;
                    this.$emit('num2change',this.dnumber2)

                },
                num2Input(event){
                    this.dnumber2=event.target.value
                    this.$emit('num2change',this.dnumber2)

                      // 同时修改dnumber1的值  下面是上面的一百倍
                    this.dnumber1=this.dnumber1/100;
                    this.$emit('num1change',this.dnumber1)

                },

            }
        }
        const app = new Vue({
            el: "#app",
            data: {
                num1: 1,
                num2: 2
            },
            components: {
                cpn
            },
            methods:{
                num1change(value){
                    // 把字符串转换为数字
                    // this.num1=value*1;
                    this.num1=parseFloat(value);

                },
                num2change(value){
                    this.num2=parseFloat(value);
                },
            }
        })
    </script>
</body>

新手小白请求出战！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件通信-父子组件的案例

父传子<body> <div id="app"> <cpn :cnum1="num1" :cnum2="num2"></cpn> </div> <template id="cpn"> <div> <h2>props:{{cnum1}}</h2> <h2>data:{{dnumb.
复制链接

扫一扫