zoukankan      html  css  js  c++  java
  • vue2.0学习之组件间通信

    /* child.vue*/
    	子组件
    	<template>
    		<div>
    			/*必须要用div包裹起来,然后在里面写需要的组件内容,这里面和平常写的html是一样的*/
    			
    		<div>
    	</template>
    
    	<script>
    		/*这里面写vue*/
    		/*引入其他vue组件*/
    		@import header from "./header.vue" //在components 中要引入才能使用
    		export default{
    			props: { /*props里面的是接口,以便于在其他页面中传入参数*/
    				size: {
    					type: Number
    				},
    				seller:{
    					type:{}
    				}
    
    			},
    			data() {
    				return {
    					/*这里写的数据,相当于new Vue里面的data*/
    					date:"2017-10-13"
    				}
    			},
    			methods: {
    				detail: function(){
    					console.log("方法")
    				}
    			},
    				/*这里也可以写钩子函数*/
    			components: {
    				header
    			},
    			//computed  计算属性,里面放一些业务逻辑代码,一定要return
    			computed: {
    				setDate() {
    					return this.date
    				}
    			}
    		}
    	</script>
    
    	<style>
    		/*这里面写css样式*/
    		/*引入其他css样式*/
    		@import "./common.css"	
    	</style>
    

      组件中引入其他vue组件和css样式要使用@import

    两个组件之间通信

    // 父组件传seller和size给子组件,其中size为数值,seller为通过http请求得到的
    	<template>
    		/*:size 是上面的props中的参数  score 也是传入数据给子组件使用 */
    		<div :size="5" :score ="score" :seller="seller">
    
    		</div>
    	</template>
    
    	<script>
    		@import header from "./child.vue"
    		export default {
    			 props:{
    			    size:{
    			      type:Number
    			    },
    			    score:{
    			      type:Number
    			    }
    			}			
    		}
    	</script>
    

      

  • 相关阅读:
    socket 中文man页面函数
    指针和数组(上)
    char和unsigned char--数据类型区别
    自己的总结
    warning C4305:“初始化”:从“double”到“float”截断
    指针数组和数组指针区别
    Python模块常用的几种安装方式
    Jenkins环境搭建
    wxPython:事件
    wx.ListCtrl简单使用例子
  • 原文地址:https://www.cnblogs.com/sllzhj/p/8492188.html
Copyright © 2011-2022 走看看