vue2.x中的父传子

最新推荐文章于 2024-07-11 09:05:40 发布

oldfour_0830_9674

最新推荐文章于 2024-07-11 09:05:40 发布

阅读量235

点赞数

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

本文链接：https://blog.csdn.net/qq_41163341/article/details/109666296

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

父组件通过自定义属性来传值，子组件通过props来接收。
三个注意事项：

props接收的数据不允许修改，修改就要报错
我们可以在子组件data定义一个属性，专门用来接收父组件传过来的数据，在mounted里面赋值，但是由于mounted执行一次，所以这种方式，初始值是一样的，后面父组件变，子组件不变；子组件变，父组件不变
如果你想实现父变子变，子变父变，那么就传递一个json

代码案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box {
            width: 80%;
            margin: 20px auto;
            border: 1px solid orange;
        }
    </style>
</head>

<body>
    <div id="app">

    </div>
    <template id="ap">
        <div class="box">
            <h1>this is app</h1>
            <v-parent></v-parent>
            <p>123132</p>
        </div>
    </template>
    <template id="parent">
        <div class="box">
            <h1>this is parent component</h1>
            <p>pData:{{pData}}</p>
            <input type="text" v-model="pData">
            <hr>
            <p>parent data2:{{pData2}}</p>
            <input type="text" v-model="pData2">
            <hr>

            <p>msg:{{json.msg}}</p>
            <input type="text" v-model="json.msg">

            <v-child a="10" b="20" c="30" :p="pData" :p2="pData2"
                :j="json"
            ></v-child>

        </div>
    </template>
    <!--页面可以用的数据有：data computed props -->
    <!-- 1.props接收的数据不允许修改，修改就要报错 -->
    <!-- 2.我们可以在子组件data定义一个属性，专门用来接收父组件传过来的数据，在mounted里面赋值，但是由于mounted执行一次，所以这种方式，初始值是一样的，后面父组件变，子组件不变；子组件变，父组件不变 -->
    <!-- 3.如果你想实现父变子变，子变父变，那么就传递一个json -->
    <template id="child">
        <div class="box">
            <h1>this is child component</h1>
            <p>cData:{{cData}}</p>
            <input type="text" v-model="cData">
            <p>a:{{a}}</p>
            <p>b:{{b}}</p>
            <p>parent data:{{p}}</p>
            <!-- 1.直接修改父组件传过来的值会报错 -->
            <input type="text" v-model="p">
            <hr>
            <!-- 2.一次性赋值 后面父子无关 -->
            <p>parent data2:{{p22[0]}}</p>
            <input type="text" v-model="p22">

            <hr>
            <!-- 3.父变子变，子变父变 -->
            <p>parent msg:{{j.msg}}</p>
            <input type="text" v-model="j.msg">
        </div>
    </template>
    <script>
        let vChild = {
            template: "#child", 
            props:['a','b','p','p2','j'],
            data(){
                return {
                    cData:"this is child data",
                    p22:""
                }
            },
            // 挂载完成
            mounted(){
                this.p22=this.p2;
                //
                /*var x=10;
                var y=x;
                x=20;*/

                /*var json={
                    msg:"王者荣耀"
                }
                var j=json;
                j.msg="王者荣耀123";*/


            }
        }
        let vParent = {
            template: "#parent",
            data(){
                return {
                    pData:"this is parent data",
                    pData2:["this is parent data233"],
                    json:{
                        msg:"王者荣耀"
                    }
                }
            },
            components: {
                vChild
            }
        }
        let App = {
            template: "#ap",
            components: {
                vParent
            }
        }
        new Vue({
            el: "#app",
            data: {

            },
            methods: {},
            watch: {},
            computed: {},
            template: "<App></App>",
            components: {
                App
            }
        })
    </script>
</body>

</html>

oldfour_0830_9674

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.x中的父传子

父组件通过自定义属性来传值，子组件通过props来接收。三个注意事项：props接收的数据不允许修改，修改就要报错我们可以在子组件data定义一个属性，专门用来接收父组件传过来的数据，在mounted里面赋值，但是由于mounted执行一次，所以这种方式，初始值是一样的，后面父组件变，子组件不变；子组件变，父组件不变如果你想实现父变子变，子变父变，那么就传递一个json代码案例<!DOCTYPE html><html lang="en"><head&g
复制链接

扫一扫

专栏目录