VUE2.0组件之间的传值--菜鸟--有错误谢谢指教!!

①组件实例的作用域:

是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享。

父组件向子组件的传值:

要用到一个组件必须有三个步骤: 

1、  <组件></组件>   //<zi></zi>

2、挂载组件

import zi from '@/components/zi'

3、组件名

 components: { 
  	zi,
  },

父组件:

<template>部分

<zi :text="data"></zi> 
javascript部分:

import zi from '@/components/zi'

export default {
  name: 'about',
  data() {
      return {
    data: { 
	'title': '新闻',
          },
      };
   },
  components: {  
  	zi,
  },
}
子组件:

<template>部分

<a :href="url1" class="hide">{{text.title}}>></a>
javascript部分:
props: {
  	text: {
  		type: Object
  	},
  },

这是通过props传输数据;还可以通过$emit来传输数据

v-on :监听事件

$emit:触发事件

父组件:

</template>部分:

  <zi  v-on:changeComponentName  = "changeComponentName"></zi>
{{componentName }}

js部分:

  methods:{
  	changeComponentName:function(newc){
  		this.componentName = newc
  	}
  }
子组件:

</template>部分:

<button @click="clissCallback">我是子组件</button>

js部分:

 methods:{
  	    clissCallback:function(){
  	    	this.$emit("changeComponentName",this.newc)  //changeComponentName为自定名称 ,this.newc为要传过去的参数
  	  }  }
官方文档https://cn.vuejs.org/v2/guide/components.html#Prop


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值