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上一篇: 2018-07-22组件之间的互相传值
下一篇: Vue 3.0组件库初始化