欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 22:45:22
...

①组件实例的作用域:

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

父组件向子组件的传值:

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

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