-
vue之父组件向子组件传值
2020-06-16 11:49:32vue之父组件向子组件传值 vue中pros官方解释 问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了。 想实现的效果:...vue之父组件向子组件传值
问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了。
- 想实现的效果:
具体实现代码:
- 父组件的代码:
<!-- 注释的部分是之前没有用组件的代码 --> <!-- <ul class="videoList"> <li v-for="item in videoList" :key="item.id" class="videoItem"> <el-card :body-style="{ padding: '0px' }"> <img :src="item.src" class="image"> <div style="padding: 14px;"> <span class="videoTitle">{{ item.title }}</span> <div class="bottom clearfix"> <span class="left" style="cursor: pointer;" @click="anchorDetail">{{ item.author }}</span> <span class="right">{{ item.count }}人在看</span> </div> </div> </el-card> </li> </ul> --> <!-- 用组件之后的代码 --> <Video v-bind:newlists="videoList"></Video>
父组件中要定义好videoList
import Video from '@/components/frontend/videoItem' export default { components: { Video }, data(){ return { videoList: [{ id: 0, title: "最美的官方", author: "贝壳官方", count: 300, src: require('../../../assets/img/homepage/1.png') }, { id: 1, title: "最美的官方哈哈哈啊哈哈哈哈哈哈美的官方哈哈哈啊哈哈哈哈哈哈", author: "贝壳官方", count: 300, src: require('../../../assets/img/homepage/1.png') }, { id: 2, title: "最美的官方", author: "贝壳官方", count: 300, src: require('../../../assets/img/homepage/1.png') }, { id: 3, title: "最美的官方", author: "贝壳官方", count: 300, src: require('../../../assets/img/homepage/1.png') }, { id: 4, title: "最美的官方", author: "贝壳官方", count: 300, src: require('../../../assets/img/homepage/1.png') }, { id: 5, title: "最美的官方", author: "贝壳官方", count: 300, src: require('../../../assets/img/homepage/1.png') }, { id: 6, title: "最美的官方", author: "贝壳官方", count: 300, src: require('../../../assets/img/homepage/1.png') }, { id: 7, title: "最美的官方", author: "贝壳官方", count: 300, src: require('../../../assets/img/homepage/1.png') } ] } }
- 子组件代码:
<template> <ul class="videoList"> <li v-for="item in newlists" :key="item.id" class="videoItem"> <el-card :body-style="{ padding: '0px' }"> <img :src="item.src" class="image"> <div style="padding: 14px;"> <span class="videoTitle">{{ item.title }}</span> <div class="bottom clearfix"> <span class="left" style="cursor: pointer;" @click="anchorDetail">{{ item.author }}</span> <span class="right">{{ item.count }}人在看</span> </div> </div> </el-card> </li> </ul> </template> <script> export default { // 父组件传过来的数据 props: [ "newlists" ], // 自己的数据 data() { return { } }, methods: { anchorDetail() { this.$router.push('/anchor') } } } </script> <style scoped="scoped"> /deep/.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover { box-shadow: none; } .videoList { display: flex; flex-flow: wrap; justify-content: space-between; } .videoList .videoItem { width: 17.1875rem; margin-bottom: 10px; } .videoItem .image { width: 17.1875rem; height: 12.5rem; } .videoTitle { font-size: 14px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; width: 245px; } .bottom { font-size: 14px; } .bottom .left { float: left; } .bottom .right { float: right; } </style>
父组件中只要定义好
<Video v-bind:newlists="videoList"></Video>
中的videoList
,并且把子组件导入进来就ok。子组件需要
props: [ "newlists" ],
并且将v-for中的list改为newlists
即可。 - 想实现的效果:
-
vue之父传子props
2020-11-24 21:55:56父传子 props 1. 创建子组建 (创建,挂载,使用) 2. 在子组建中创建props属性(用于接收父组件出入的数据) 3. 在使用子组建的标签内用v-band绑定属性和数据(:props属性=“父组件数据”) 4. 在子组建中... -
Vue之父组件与子组件
2021-02-08 22:02:58核心代码如下: <body> <div id="app">...script src="../Vue_js/vue.js"></script> <script> //创建子组件 const cpnC1 = Vue.extend({ template: '' + '<div>' + .核心代码如下:
<body> <div id="app"> <cpn2></cpn2> </div> <script src="../Vue_js/vue.js"></script> <script> //创建子组件 const cpnC1 = Vue.extend({ template: '' + '<div>' + '<h2>我是子组件</h2>' + '<p>我是内容:hahahahaha</p>' + '</div>' }) //创建父组件 const cpnC2 = Vue.extend({ template: '' + '<div>' + '<h2>我是父组件</h2>' + '<p>我是内容:哈哈哈哈</p>' + '<cpn1></cpn1>' + '</div>', components: { cpn1: cpnC1 }, }) const app = new Vue ({ el: '#app', data: { message: 'vue模板', }, components: { cpn2: cpnC2 }, methods: { }, }) </script> </body>
-
Vue之父组件向子组件传递数据
2017-06-03 00:27:47Vue1.创建子组件,在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props,然后创建一个名为message的属性
3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值
4.我们依然可以对message的值进行v-bind动态绑定
5.对于图片的显示注意要使用’v-bind’进行绑定,因为这里是显示在属性中所以并不用大括号,而显示在HTML中的数据必须使用大括号进行包裹
总结一下:
- 子组件在props中创建一个属性,用以接收父组件传过来的值
- 父组件中注册子组件
- 在子组件标签中添加子组件props中创建的属性
- 把需要传给子组件的值赋给该属性
-
初识vue之父组件给子组件传值
2019-09-12 15:38:03父组件传值给子组件,主要是用...首先我定义一个heander.vue,用来作为home中的子组件 <template> <div> <!-- title用来显示父组件传过来的值 --> <h3>{{title}}</h3> <!-- ... -
Vue之父传子,清晰易懂。
2019-04-02 01:03:42props之数据验证 验证的类型可以是: String,Number,Boolean,Object,Array,Function props:{ props1:Number, //必须是数值类型 props2:[String,Number], // 数字类型 || 字符串 props3:{ type:Number, // ... -
vue之父传子通信(一)
2019-04-25 10:01:35Vue设立的初衷是组件与组件之间是独立的,是不共享的,所以要实现数据通信。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=... -
Vue之父组件向子组件传方法
2018-11-22 22:55:28父组件 <item :todo="todo" :func="deleteTodo" v-for="todo in filteredTodos" :key="todo.id" /> methods: { deleteTodo(id) { this.todos.... -
vue之父传子通信(二)
2019-04-30 08:51:15<script src="node_modules/vue/dist/vue.min.js"> let son = { template: "儿子,我收到我老爸{{money}}</div>", //props: ['money'] // 相当于定义了一个变量 props:{ money:{ //必须的 required:true, ... -
Vue之父组件给子组件传值和方法
2018-11-04 15:50:06父组件写好需要接受的值和方法,使用:title="title"传title属性值给子组件, :go="go"传递go方法 <template> <div id="root"> <!-- 3.引用组件... -
十三、Vue之 父组件传值给子组件 和 子组件传值给父组件
2019-03-28 21:49:41一、简要介绍 父子组件之间的传值主要有三种:传递数值、...1.子组件:Header.vue <template> <div> <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 --> &l... -
vue之 父组件与子组件的 ‘值’ 双向绑定语法糖 ‘.sync’
2019-04-11 11:09:08vue中,父子之间的传值称为双向绑定 在实际运用中,我们会在父组件中对子组件传过来的值被动设置一个自定义的事件监听传过来的值 比如 父组件中: <div> 子组件: <child :val='testV' @transfer='... -
十四、Vue之父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
2019-03-28 22:58:56一、父组件主动获取子组件的数据和方法 1.调用子组件的时候定义一个ref <v-header ref="header"></v-header> 2.在父组件里面通过 this.$refs.header.属性 this.$refs.header.方法 二、子组件... -
【兼容uni-app】Vue之父组件如何调用子组件的属性和方法【参考$refs属性】【有坑....】
2019-06-14 09:16:43总结:$refs和生命周期...父组件parent.vue <template> <view> <!-- 这里的child可以随意取,但是必须唯一,在refs对象中 --> <child ref="child"></child> </view> <... -
VUE 之父组件传值给子组件,子组件监听数据渲染完后执行某函数、watch监听prop中的属性有值后再执行、prop...
2019-10-17 11:30:10-- 父组件 --> <div class="ulbox"> <huxing :huxing="huxing" /> </div> <!-- 子组件--> <ul class="huxingbd clearfix" ref="ul" :style="{ width: widthnum }"> <... -
vue之子父组件通信
2020-02-19 15:52:11在vue之中,父子组件通信的方法如下图 1.父组件向子组件传值(props) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-... -
vue组件之父组件向子组件传值
2019-09-27 11:20:53vue组件之父组件向子组件传值 父组件App.vue 向子组件HelloWord.vue传值 父组件 <template> <div id="app"> <kk v-bind:users="words" /> //v-bind绑定的属性名要与子组件中props属性名一致... -
Vue之 子父组件相互传值
2019-01-24 17:08:14刚学习vue的时候,只知道父组件向子组件传递参数是通过props进行传递的;子组件向父组件传递参数是通过this.$emit()进行传递的。本来以为用处不是很大的,到实际开发的时候真实需要的时候打脸了,这玩意用起来还挺... -
vue+element之父向子传值
2018-03-28 17:41:57purchaseApplyBills.vue(父页)是一个页面,它里面需要调用mechanicalDictonaryChoose.vue(子页)页面中的数据,这涉及到子向父传值,这里先不提,我要说的是当父页面需要向子页面传递一个值时需要做的操作(子向... -
Vue 的父组件和子组件之数据传输、方法互调
2020-01-18 17:04:00一、在父组件中调用子组件 步骤: 创建一个子组件 <template> <div> 这里是子组件!! </div> </template> <script> export default { name: "Children"... -
Vue之子传父。
2019-04-02 10:51:11子组件给父组件传值! 话不多说,直接上代码吧! 父组件如下: <template> <div> <!--handleReceive是子组件生成事件--> <son @handleReceive="handleReceives"></son> </div> ... -
vue基础之父传子的理解
2020-07-08 00:42:42<!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...script src="vue/vue.js"></scr -
Vue之子传父通信
2019-05-06 15:37:26子传父的过程是一个发送消息的过程 ,发送more消息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial... -
Vue组件之父组件给子组件传值
2019-08-24 15:08:38组件其实也是一个Vue的实例 — 组件是可复用的Vue实例 组件 1、注册一个组件 2、使用组件 — 就像HTML标签一样使用即可 注册组件 全局注册组件 new Vue之前写的组件 Vue.component('component-name',{ template:'&... -
vue 父传子 子传父
2020-10-28 11:59:13Vue学习之 父传子 子传父 父传子 父模板中的写法 子模版中的写法 ** 子传父 子模版中的写法 ** 父模板中的写法
收藏数
1,547
精华内容
618
-
金三银四整理了经典spring面试题300道,助你备战BAT大厂,升职加薪!
-
Samba 服务配置与管理
-
java 实例域_深入理解Java自定义类
-
朱老师C++课程第3部分-3.6智能指针与STL查漏补缺
-
51单片机条形码识别设计.rar
-
app软件测试全栈系列精品课程
-
MySQL 主从复制 Replication 详解(Linux 和 W
-
java 实时推送 redis_java编程——Kafka,Mq和Redis作为消息队列使用时的差异有哪些...
-
家庭每月收支记账表.7z
-
java 实时推送 redis_java spring redis 消息发布与监听
-
第一百题
-
Matlab编程基础
-
注解练习(2.27)
-
非常简单清、清晰、明了的九宫格图标按钮的示例(android)
-
牛牛量化策略交易
-
flowjo v10流式数据分析软件
-
java 实时推送 redis_WebSocket实现读取Redis的车辆实时数据推送到浏览器
-
【爱码农】C#制作MDI文本编辑器
-
java图形选旋转函数_java 图形旋转操作
-
linux基础入门和项目实战部署系列课程