精华内容
下载资源
问答
  • vue之父组件向子组件传值 vue中pros官方解释 问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了。 想实现的效果:...

    vue之父组件向子组件传值

    vue中pros官方解释

    问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了。

    • 想实现的效果:
      在这里插入图片描述

    具体实现代码:

    • 父组件的代码:
        <!-- 注释的部分是之前没有用组件的代码 -->
    	<!-- <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. 在子组建中...

    父传子 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:47
    Vue

    1.创建子组件,在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中创建的属性
    • 把需要传给子组件的值赋给该属性
    展开全文
  • 组件传值给子组件,主要是用...首先我定义一个heander.vue,用来作为home中的子组件 <template> <div> <!-- title用来显示组件传过来的值 --> <h3>{{title}}</h3> <!-- ...
  • Vue之父传子,清晰易懂。

    千次阅读 2019-04-02 01:03:42
    props数据验证 验证的类型可以是: String,Number,Boolean,Object,Array,Function props:{ props1:Number, //必须是数值类型 props2:[String,Number], // 数字类型 || 字符串 props3:{ type:Number, // ...
  • Vue设立的初衷是组件与组件之间是独立的,是不共享的,所以要实现数据通信。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
  • 组件 &lt;item :todo="todo" :func="deleteTodo" v-for="todo in filteredTodos" :key="todo.id" /&gt; methods: { deleteTodo(id) { this.todos....
  • <script src="node_modules/vue/dist/vue.min.js"> let son = { template: "儿子,我收到我老爸{{money}}</div>", //props: ['money'] // 相当于定义了一个变量 props:{ money:{ //必须的 required:true, ...
  • 组件写好需要接受的值和方法,使用:title="title"传title属性值给子组件, :go="go"传递go方法 &lt;template&gt; &lt;div id="root"&gt; &lt;!-- 3.引用组件...
  • 一、简要介绍   父子组件之间的传值主要有三种:传递数值、...1.子组件:Header.vue <template> <div> <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 --> &l...
  • vue中,父子之间的传值称为双向绑定 在实际运用中,我们会在组件中对子组件传过来的值被动设置一个自定义的事件监听传过来的值 比如 组件中: <div> 子组件: <child :val='testV' @transfer='...
  • 一、组件主动获取子组件的数据和方法 1.调用子组件的时候定义一个ref <v-header ref="header"></v-header> 2.在组件里面通过 this.$refs.header.属性 this.$refs.header.方法 二、子组件...
  • 总结:$refs和生命周期...组件parent.vue <template> <view> <!-- 这里的child可以随意取,但是必须唯一,在refs对象中 --> <child ref="child"></child> </view> <...
  • -- 组件 --> <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组件之父组件向子组件传值 父组件App.vue 向子组件HelloWord.vue传值 父组件 <template> <div id="app"> <kk v-bind:users="words" /> //v-bind绑定的属性名要与子组件中props属性名一致...
  • 刚学习vue的时候,只知道组件向子组件传递参数是通过props进行传递的;子组件向组件传递参数是通过this.$emit()进行传递的。本来以为用处不是很大的,到实际开发的时候真实需要的时候打脸了,这玩意用起来还挺...
  • vue+element之父向子传值

    千次阅读 2018-03-28 17:41:57
    purchaseApplyBills.vue页)是一个页面,它里面需要调用mechanicalDictonaryChoose.vue(子页)页面中的数据,这涉及到子向传值,这里先不提,我要说的是当页面需要向子页面传递一个值时需要做的操作(子向...
  • 一、在组件中调用子组件 步骤: 创建一个子组件 <template> <div> 这里是子组件!! </div> </template> <script> export default { name: "Children"...
  • Vue之子传

    2019-04-02 10:51:11
    子组件给组件传值! 话不多说,直接上代码吧! 组件如下: <template> <div> <!--handleReceive是子组件生成事件--> <son @handleReceive="handleReceives"></son> </div> ...
  • <!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的实例 — 组件是可复用的Vue实例 组件 1、注册一个组件 2、使用组件 — 就像HTML标签一样使用即可 注册组件 全局注册组件 new Vue之前写的组件 Vue.component('component-name',{ template:'&...
  • vue 传子 子传

    2020-10-28 11:59:13
    Vue学习 传子 子传 传子 模板中的写法 子模版中的写法 ** 子传 子模版中的写法 ** 模板中的写法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,547
精华内容 618
热门标签
关键字:

vue之父

vue 订阅