vue学习笔记4、父子组件之间的数据通信

水深无声 2023-06-14 04:25 12阅读 0赞

# 1、父组件向子组件进行数据传递 #

<body>
        <div id="app">
            <p>{
       {a}}</p>
            <br/>
            <br/>
            <son :parentval="a"></son>
        </div>
    
        
        <template id="son">
            <div>
                <p>子主键的值：{
       {son_data}}</p>
                <p>父主键传给子主键的值：{
       {parentval}}</p>
                <button @click="dianwo">子组件按钮</button>
            </div>
        </template>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 定义一个子组件对象
        var son={
            //引用标签
            template:"#son",  
            //这个是数据对象，是子组件单独保存数据的，可以进行读写操作
            data(){
                return {
                    son_data:"我是子主键的值",
                }
            },
            // props适用于进行组件之间传值用的，这里定义了一个parentval值，当父主键使用子组件时
            //<son :parentval="a"></son>  例如这个，那么这个父组件a的值就可以传递给子主键，前面有冒号，所有这里的a是变量
            props:{
                parentval:""
            },
            methods:{
                dianwo(){
                    console.log("我是子组件按钮！");
                },
            }
        }
    
        var vm = new Vue({
            el: "#app",
            //父组件引入子主键，才能使用
            components:{
                son,
            },
            data: { 
                a: "我是父主键的值",
            },
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70][]

# 2、子主键向父组件进行数据传递 #

<body>
        <div id="app">
            <p>{
       {a}}</p>
            <br/>
            <br/>
            
            <son :parentval="a" @parent_event="parent_method"></son>
        </div>
    
        
        <template id="son">
            <div>
                <p>子主键的值：{
       {son_data}}</p>
                <p>父主键传给子主键的值：{
       {parentval}}</p>
                
                <button @click="dianwo">子组件按钮</button>
            </div>
        </template>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 定义一个子组件对象
        var son={
            //引用标签
            template:"#son",  
            //这个是数据对象，是子组件单独保存数据的，可以进行读写操作
            data(){
                return {
                    son_data:"我是子主键的值",
                }
            },
            // props适用于进行组件之间传值用的，这里定义了一个parentval值，当父主键使用子组件时
            //<son :parentval="a"></son>  例如这个，那么这个父组件a的值就可以传递给子主键，前面有冒号，所有这里的a是变量
            props:{
                parentval:""
            },
            methods:{
                dianwo(){
                    console.log("我是子组件按钮！");
                    //调用父组件的parent_event事件，并且传递参数，由于parent_event事件执行了parent_method方法，所以相当于这个子组件执行的是父组件的parent_method方法，并且传参
                    this.$emit("parent_event",123);
                },
            }
        }
    
        var vm = new Vue({
            el: "#app",
            //父组件引入子主键，才能使用
            components:{
                son,
            },
            data: { 
                a: "我是父主键的值",
            },
            methods:{
                parent_method(val){
                    console.log("触发父组件方法，值已经改变,"+val);
                    if(!val){
                        this.a="触发父组件方法，值已经改变,子组件无传递参数";
                    }else{
                        this.a="触发父组件方法，值已经改变,子组件传递参数是:"+val;
                    }
                }
            }
    
        })

按钮点击之前：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 1][]

按钮点击之后：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191118165255220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191118171900839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191118171914903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5,size_16,color_FFFFFF,t_70