子组件以及父子组件之间的传参

子组件

栗子:

需要注意的点都在代码中注释标出来了

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: calc(200px * 4 + 80px);
            margin: 0 auto;
            user-select: none;
        }
        .box {
            width: 200px;
            height: 260px;
            /*border: 1px solid black;*/
            background-color: rgba(10, 200, 30, 0.5);
            border-radius: 10px;
            float: left;
            margin: 10px;
        }
        .box img {
            width: 100%;
            /*height: 200px;*/
            border-radius: 50%;
        }
        .box p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="wrap">
            <tag></tag> <!-- 可以复用子组件 -->
            <tag></tag>
            <tag></tag>
            <tag></tag>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    //定义了一个子组件
    let titleTag = {
        template: `
        <p>
            <b>
                这是一种纯二哈
            </b>
        </p>
        `,
    };

    let tag = {
        template: `
        <div class="box">
            <img src="img/001.jpg" alt="">
            <title-tag />
            <p @click="fn">
                锤它:<b>{{ num }}下</b>
            </p>
        </div>
        `,
        // 能被复用的组件(除了根组件),数据都要做局部化处理,因为复用组件后,组件的数据是相互独立的,也就是说每个子组件都有属于自己的数据,不共用。
        // data的值为绑定的方法的返回值,返回值是存放数据的字典,和根组件的data方式不一样。
        data () {
            return {
                num: 0
            }
        },
        methods: {
            fn() {
                this.num ++
            }
        },
        //子组件中还能放他的子组件,可以无限的放下去。
        components: {
            titleTag,
        }
    };

    new Vue({
        el: '#app',
        components: {
            tag,
        }
    });

</script>
</html>

组件标签不能添加系统事件,只能添加自定义事件,自定义事件在组件内部通过$emit主动触发,因为你只能给一个标签加点击事件,而组件标签里面是很多标签,所以不能给组件标签加系统事件,什么是系统事件,就是 @click ,但是你可以给他加上自定义事件,在后面的子组件给父组件传数据的时候会讲。

组件传参-父传子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>父传子</title>
    <style>
        .wrap {
            width: calc(200px * 4 + 80px);
            margin: 0 auto;
            user-select: none;
        }
        .box {
            width: 200px;
            height: 260px;
            /*border: 1px solid black;*/
            background-color: rgba(10, 200, 30, 0.5);
            border-radius: 10px;
            float: left;
            margin: 10px;
        }
        .box img {
            /*width: 100%;*/
            height: 160px;
            border-radius: 50%;
            margin: 0 auto;
            display: block;
        }
        .box p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="wrap">
            <tag v-for="dog in dogs" v-bind:dog="dog" :a="1" :b="2" />
        </div>
    </div>
</body>

<script src="js/vue.js"></script>
<script>
    let dogs = [
        { title: '二哈1号', img: 'img/1.jpg', },
        { title: '二哈2号', img: 'img/2.jpg', },
        { title: '二哈3号', img: 'img/3.jpg', },
        { title: '二哈4号', img: 'img/4.jpg', },
        { title: '二哈1号', img: 'img/1.jpg', },
        { title: '二哈2号', img: 'img/2.jpg', },
        { title: '二哈3号', img: 'img/3.jpg', },
        { title: '二哈4号', img: 'img/4.jpg', },
    ];

    let tag = {
        // 在组件内部就可以通过设置的自定义属性,拿到外部选择子组件提供给属性的值
        props: ['dog', 'a', 'b', 'z'],
        template: `
        <div class="box">
            <img :src="dog.img" alt="">
            <p>
                <b>
                    {{ dog.title }}
                </b>
            </p>
            <p @click="fn">
                锤它:<b>{{ num }}下</b>
            </p>
        </div>
        `,
        data () {
            return {
                num: 0,

            }
        },
        methods: {
            fn() {
                this.num ++
            }
        },
    };

    new Vue({
        el: '#app',
        data: {
            dogs,
        },
        components: {
            tag,
        }
    });
    /** 总结
     *  1.数据在父组件中产生
     *  2.在父组件中渲染子组件,子组件绑定自定义属性,附上父组件中的数据
     *  3.子组件自定义属性在子组件的props成员中进行声明(采用字符串发射机制)
     *  4.在子组件内部,就可以用props声明的属性(直接作为变量)来使用父组件中的数据
     */
</script>
</html>

因为这个dogs的数据是根组件的,要在子组件中被渲染出来,所以是父传子。

组件传参-子传父

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
    <style>
        ul {
            list-style: none;
        }
        .d-btn {
            font-size: 12px;
            width: 15px;
            display: inline-block;
        }
        .d-btn:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <button @click="send_comment">留言</button>
        <ul>
            <tag v-for="(v, i) in comments" :msg="v" :index="i" @f1="deleteMsg"/>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let tag = {
        props: ['msg', 'index'],
        template: `
        <li>
            <i class="d-btn" @click="fn">x</i>
            <b>{{ msg }}</b>
        </li>
        `,
        methods: {
            fn () {
                // 点击子集,要告诉父级删除第几条数据,因为comments在父级中
                // 需要通知父级
                // 只要一执行到这句,就会马上通知父级,然后父级就会调用deleteMsg,同时接受你传过去的index
                this.$emit('f1', this.index);
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            msg: '',
            //因为空的数组反序列化会报错,所以要在这里加判断。
            comments: localStorage.comments ? JSON.parse(localStorage.comments) : [],
        },
        components: {
            tag,
        },
        methods: {
            send_comment() {
                if (this.msg) {
                    this.comments.push(this.msg);
                    this.msg = '';
                    localStorage.comments = JSON.stringify(this.comments);
                }
            },
            deleteMsg(index) {
                this.comments.splice(index, 1);
                localStorage.comments = JSON.stringify(this.comments);
            }
        }
    })
</script>
<script>
    // localStorage,sessionStorage不能直接存储数组和对象,需要序列化为json
    localStorage.arr = JSON.stringify([1, 2, 3]);
    let res = JSON.parse(localStorage.arr);
    console.log(res, res[2]);
</script>
</html>

vue模板

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <h1> {{ title }} </h1>
    <!-- 组件标签不能添加系统事件,只能添加自定义事件,自定义事件在组件内部通过$emit主动触发 -->
    <tag @self_action="changeTitle"/>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let tag = {
        template: `
        <div>
            <input v-model="sub_title" />
        </div>
        `,
        data() {
            return {
                sub_title: ''
            }
        },
        watch: {
            sub_title() {
                // 将sub_title与父级的title建立关联
                // 激活(触发)self_action自定义事件
                this.$emit('self_action', this.sub_title)
            }
        }
    };

    new Vue({
        el: '#app',
        components: {
            tag,
        },
        data: {
            title: '父级初始标题'
        },
        methods: {
            changeTitle(sub_title) {
                this.title = sub_title ? sub_title : '父级初始标题';
            }
        }
    })
</script>
</html>

简述以上

子组件
let tag = {
    template: `...`,
    data() {
        return {
            // 数据...
        }
    }
}
// 在哪个组件模板中出现的属性变量和方法变量,都由当前所属组件自己提供
父传子
<div id="app">
    <tag :sub_msg="msg" />
</div>

<script>
let tag = {
    props: ['sub_msg']
    template: `<div>{{ sub_msg }}</div>`,
}

new Vue({
    el: '#app',
    components: {
        tag,
    },
    data: {
        msg: '父级数据'
    }
})
</script>
子传父(了解)
<div id="app">
    <h1> {{ title }} </h1>
    <!-- 组件标签不能添加系统事件,只能添加自定义事件,自定义事件在组件内部通过$emit主动触发 -->
    <tag @self_action="changeTitle"/>
</div>

<script>
    let tag = {
        template: `
        <div>
            <input v-model="sub_title" />
        </div>
        `,
        data() {
            return {
                sub_title: ''
            }
        },
        watch: {
            // 监听sub_title属性,值一改变就会触发
            sub_title() {
                // 将sub_title与父级的title建立关联
                // 激活(触发)self_action自定义事件
                this.$emit('self_action', this.sub_title)
            }
        }
    };

    new Vue({
        el: '#app',
        components: {
            tag,
        },
        data: {
            title: '父级初始标题'
        },
        methods: {
            changeTitle(sub_title) {
                this.title = sub_title ? sub_title : '父级初始标题';
            }
        }
    })
</script>  

原文地址:https://www.cnblogs.com/chanyuli/p/11854116.html

时间: 2024-10-10 18:17:00

子组件以及父子组件之间的传参的相关文章

Vue组件之间的传参

Vue组件之间的传参方式有三种 第一:父传子 第二:子传父 第三:兄弟之间相传 第一,父传子,顾名思义,外层组件传参给嵌套内部的组件 在父代中嵌套的标签 <son v-bind:toSon="fatherData"></son> //发送数据给子代 在子代中接收数据 需要添加一个属性叫做prpos props:["toSon"], <!DOCTYPE html> <html lang="en"> &

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

react基础总结篇1,定义组件实现父子组件传值

前端时间学习了vue,这几天开始入手react了. react项目搭建起来之后,我们一定会定义很多个组件.同样的也会涉及到父子组件的传值.今天来整理一下这个知识. 1,定义子组件步骤 1,引入react. import React,{Component} from 'react'; import './style.less'; 2,写组件并export default导出去用到了es6中的calss语法,提前说一下,this.props.content用来接收父组件中content的值,this

关于jsp之间href传参(中文)乱码问题

在A.jsp中有href传值 <a href=\"6.jsp?param="+rs.getString(2)+"\">" 在B.jsp中使用 <% request.setCharacterEncoding("utf-8");%> <%=request.getParameter("param")%> 获得值,运行调试发现是一堆乱码 起先我以为是jsp整体编码方式不对,所以进行了如下修

vue 父子组件与父子组件之间的通信

<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <input type="text" v-model=&q

EXT学习之——Ext两个js之间的传参

A  的js访问 B的js,并将A选择的guid的行传到  B的 js进行处理事项 A 的js 的写法var receiverFrom = new xxx.xxx子js方法体名 ({ parentCmp: _this, patientName: IN_ORG_ID: _this.grid.getSelectionModel().selected.items[0].raw.IN_ORG_ID,xx:123 }); receiverFrom.Show(); (function () { xxx.xx

c# winform 窗体之间的传参

说起winform程序中窗体之间的参数互传,大家找度娘会找到很多方法: 1.在窗体类中创建全局变量,类型为公开.静态的: 2.在窗体类中定义狗仔函数: 3.通过实践来船体参数: 这三种思路完全来自于霖小屋的c# winform窗体之间传递参数问题总结,大家可以看看他的这篇博客学习学习. 下面我要给大家说的一种方法相对来说有点繁琐,但对于winform程序初学者来说绝对的受用.之前在度娘上寻找winform窗体的显示与隐藏受到点启发,本来winform程序创建新的窗体的时候是不带参数的,为了能够在

React(7) --react父子组件传参

react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React from 'react' import ChildCom from './childCom.js' class ParentCom extends React.Component { render() { return ( <div> <h1>父组件</h1> <Chi

从 Vue 的视角学 React(四)—— 组件传参

组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式,和各自的优缺点 一.父组件传参到子组件 和 Vue 一样,React 中从父组件到子组件的传参也是通过 props 不过在 Vue 项目中,需要在先组件里定义将要接收的 props,而 React 可以直接获取 而且 props 不光可以接收 Number.String 等基本类型,还可以接收 Fu