vue2通信方式
1.父组件传值给子组件,利用 props
父组件 app.vue
<template>
<div id="app">
<child :name="name"/>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'App',
data() {
return {
name: '我是父组件页面的name',
}
},
components: {
child,
},
}
</script>
子组件 child.vue
<template>
<div class="box">
父组件的{{ name }}
</div>
</template>
<script>
export default {
name: 'child',
props: {
name: {
type: String, // 限制类型
default: '', // 设置默认值
require: true, // 是否必传
},
},
}
</script>
2.子组件和父组件通信 $emit
父组件 app.vue
<template>
<div id="app">
<child @see="see" />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'App',
components: {
child,
},
methods: {
see(value) {
console.log('hello', value)
},
},
}
</script>
子组件 child.vue
<template>
<div class="box">
<span @click="handleClick">你好</span>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('see', '父组件接收的参数')
},
},
}
</script>