1.父组件向子组件传值(函数也可以传递)
props只能是父组件向子组件进行传值,props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。
props可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以是传递一个函数。
props属性名规则:若在props中使用驼峰形式,模板中标签需要使用短横线的形式来书写。
父组件
// 父组件
<template>
<div id="father">
<son :msg="msgData" :fn="myFunction"></son>
</div>
</template>
<script>
import son from "./son.vue";
export default {
name: father,
data() {
msgData: "父组件数据";
},
methods: {
myFunction() {
console.log("vue");
}
},
components: {
son
}
};
</script>
子组件
// 子组件
<template>
<div id="son">
<p>{{msg}}</p>
<button @click="fn">按钮</button>
</div>
</template>
<script>
export default {
name: "son",
props: ["msg", "fn"]
};
</script>
前面一个users是自定义名字用于给子组件接收的
后一个users是父组件中的属性名
为了方便使用一般二者相同
2.子组件向父组件传递值
$emit 绑定一个自定义事件,当这个事件被执行的时候就会将参数传递给父组件,
而父组件通过v-on监听并接收参数
// 父组件
<template>
<div class="section">
<son :articles="articleList" @onEmitIndex="onEmitIndex"></son>
<p>{{currentIndex}}</p>
</div>
</template>
<script>
import son from './test/article.vue'
export default {
name: 'AAA',
components: { son },
data() {
return {
currentIndex: -1,
articleList: ['第一个', '第二个', '第三个']
}
},
methods: {
onEmitIndex(idx) {
this.currentIndex = idx
}
}
}
</script>
//子组件
<template>
<div>
<div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
</div>
</template>
<script>
export default {
props: ['articles'],
methods: {
emitIndex(index) {
this.$emit('onEmitIndex', index) // 触发父组件的方法,并传递参数index
}
}
}
</script>
这个案例父传子子传父都用到了
首先将父组件的list传递给子组件进行遍历出三个div
点击传递index值给父组件,再触发父组件的方法
3.$refs绑定触发子组件的方法或者获得数据
通过ref绑定实例来访问组件的数据和方法
父组件
ref绑定子组件 计算属性或者调用方法再获得 计算属性就方便一些
<template>
<child ref="child"></component-a>
</template>
<script>
import child from './child.vue'
export default {
components: { child },
mounted () {
console.log(this.$refs.child.name); // JavaScript
this.$refs.child.sayHello(); // hello
}
}
</script>
子组件
export default {
data () {
return {
name: 'JavaScript'
}
},
methods: {
sayHello () {
console.log('hello')
}
}
}
$parent / $children
不建议使用因为不能保证获取到的顺序。