父子组件demo

最新推荐文章于 2021-08-31 11:04:49 发布
最新推荐文章于 2021-08-31 11:04:49 发布
阅读量186 收藏
点赞数
分类专栏： front
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chushoufengli/article/details/89332056
版权 
<html>

<head>
    <title>vue</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="app">
        <!-- 答题卡子组件 -->
        <Card v-on:switch_question="switch_question" :datalist="dataList" :index="index"></Card>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    //答题卡子组件(题号选择功能)，传入dataList/index，修改index，传出index
    Vue.component('Card', {
        props: ['datalist','index'],
        template:
            `<div>
            <div class="card1">
                <p class="card-title">答题卡</p>
            </div>
            <div class="card2">
                <div :class="index==i?'current-question':'others-question'" v-for="(question, i) in datalist"
                    :key="question._id" @click="switch_question(i)">
                    {{i + 1}}
                </div>
            </div>
        </div>`,
        methods: {
            switch_question: function (i) {
                this.$emit('switch_question', i);    
            }
        }
    });

    //最外层
    new Vue({
        el: '#app',
        data: {
            index: 0,
            dataList: [
                {
                    id: '1',
                    type: 'join',
                    content: '四大名著连一连',
                    leftItems: ['《水浒传》', '《西游记》', '《三国演义》', '《红楼梦》'],
                    rightItems: ['罗贯中', '施耐庵', '曹雪芹', '吴承恩'],
                    answer: [[0, 1], [1, 3], [2, 0], [4, 2]],
                    userAnswer: null
                },
                {
                    id: '2',
                    type: 'judgment',
                    content: '所有的苹果都是水果',
                    answer: true,
                    userAnswer: null
                }
            ],
        },
        methods: {
            switch_question(i) {
                this.index = i
                console.log(this.index);
            }
        }
    })
</script>

</html>

:datalist="dataList" :index="index" 右边外层的数据，左边组件内用到的数据

因为html大小写不区分，所以左边要小写或者是用个短横线

wangfy_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件的嵌套的示例代码
12-12
本文介绍了vue父子组件的嵌套的示例代码，分享给大家，具体如下： 组件的注册： 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册，将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件： var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: '...', components: { // <my-c
Vue 组件间传值及事件触发Demo
09-07
在Vue.js框架中，组件是构建用户界面的...2. `v-model` 双向绑定：适用于父子组件间的双向数据流，通常用于表单元素。子组件需要暴露一个名为`value`的prop，并监听`input`事件来更新该值。 ```html <!-- 父组件 --> ...
vue之父子组件间通信实例讲解(props、$ref、$emit)
weixin_43445771的博客
12-12 732
vue之父子组件间通信实例讲解(props、ref、ref、ref、emit) vue之父子组件间通信实例讲解(props、$ref、$emit) &lt;/div&gt; &lt;div class="art_desc mt10"&gt;&lt;div id="art_demo"&gt;组件间如何通信，也就成为了vu...
父子组件例子
weixin_34380296的博客
08-03 112
Vue常用的三种传值方式有： 父传子 子传父 非父子传值 父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示： 1. 父组件向子组件进行传值 父组件： <template> <div> 父组件: ...
Vue父子组件传值的Demo
折扇缘浅
07-30 343
话不多说，直接上代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue父子组件传值&lt;/title&gt; &lt;script type="text/javascr
写了个父子组件的例子
s8806479的博客
08-31 393
缺点是父组件参数写太多，我同事说传一个最好 后台页面 前台页面 共用对话框，后台无按钮，前台有 //共用组件代码 <template> <div> <el-dialog title="申请详情" :visible.sync="disabled" width="60%"> <el-row :gutter="20"> <el-col :span="16"> <div class="
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
08-29
本文将通过实例讲解如何在这样的环境中实现父子组件间的通信。 首先，我们需要设置开发环境。在命令行中，依次执行以下命令： 1. 全局安装vue-cli：`npm install --global vue-cli` 2. 使用vue-cli初始化一个基于...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
在Vue.js中，数据流动通常遵循单向数据流原则，即数据从父组件流向子组件，但不直接从子组件反向修改。然而，有时子组件确实需要改变来自父组件的某些属性，这时可以通过`v-bind`的修饰符`sync`来实现数据的双向绑定...
uniapp组件自定义导航栏（vue父子通讯）
11-25
自定义导航栏组件是通过tabIndex下标来识别所触发的那一模块，为防止服务器压力大内含拦截功能，防止用户多次点击 ！！...此组件支持多端，内置配置demo！！！ ！！！喜欢就给点关注吧 嘻嘻嘻！！！
Angular 组件之间的交互的示例代码
08-27
对于更复杂的情况，比如多个非父子关系的组件间通信，可以使用Angular服务来共享数据。创建一个服务，注入到需要通信的组件中，然后通过服务的属性或方法来传递数据。例如： ```typescript // 数据共享服务(Data...
vue父子组件传值，简单demo
couch potato的博客
01-20 879
父组件向子组件传值，以属性传递 父以属性传递： template:`<div><son :title='xxx'></son></div>`, 子用(props接收)： template:`<div>父组件传过来的值{{title}}</div>`,props:['title'] 子向父组件传值，自定义事件 子组件中例...
父子组件
Golden_soft的专栏
09-27 171
&lt;template&gt; &lt;div id="parent"&gt; &lt;h3&gt;显示子组件&lt;/h3&gt; &lt;item1&gt;&lt;/item1&gt; &lt;h3&gt;--------------&lt;/h3&gt; &lt;h3&gt;取当前组件中data的值：&am
vue 父子组件传函数 demo
秋水不寒的专栏
05-28 210
父组件 <template> <div> <Hello:flFlag="myFunction"></Hello> </div> </template> importHellofrom'./HelloWorld' methods:{ myFunction(){returntrue } } 子组件 <template> <div class="hello"&g...
VUE父子组件通信简单实例
weixin_45432736的博客
06-26 163
声明一个子组件，取名Son，使其可以接收父组件传递过来的值，也可以向父组件发送信息 props是儿子接收父亲信息的关键点 this.$emit是向父亲发送信息的关键 以下是子组件接收父亲信息一步，发送信息一步，很简单 <template> <div> <div>爸爸那传过来的参数：{{fromfather}}</div> <!-- fromfather接收从父组件Father那收到的参数 --> <b
Vue最基础的父子组件例子
chijiajing的博客
09-26 828
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/vue/2.5.16/v
VUE中父子组件通信实例
weixin_43644615的博客
09-24 210
首先需要分别创建父组件和子组件 //父组件 <template> <div> <h1>我是父组件！</h1> <child></child> </div> </template> <script> import Child from '../components/child....
请写一个expo 在父子组件之间传递对象的值和方法的demo 用useState
最新发布
06-09
好的，下面是一个简单的demo代码，展示了如何使用useState在父子组件之间传递对象的值和方法： ```js import React, { useState } from 'react'; import { View, Text, Button } from 'react-native'; function ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值