vue-- 子组件改变父组件属性值的三种方法 (一刷完成)
子组件向父组件传值达到改变父组件属性值的两种方法
这是一个弹窗显示和隐藏的组件
子组件
html:
<el-button @click="$emit('update:showDlg',false)">
取消
- </el-button>
父组件
HTML:
<AddBtn :showDlg.sync= 'showDlg'></AddBtn>
JS:
showDlg: false
父组件必须有. sync 修饰符
子组件中 showDlg 应该是父组件 props 传入的数据
子组件中不应该直接用 showDlg 来控制弹窗的显示和隐藏, 避免直接依赖父组件的值, 可以在 data 中定义自己的私有属性, 并监听父组件中传入的值, 动态改变私有属性
on 配合 $emit
父组件:
- <template>
- <parent @change-type="onChangeType"></parent>
- </template>
- <script>
- data () {
- return {
- types: 0,
- },
- methods: {
- onChangeType (type) { // type 是子组件 $emit 传递的参数
- this.types = type
- }
- }
- </script>
子组件:
- <template>
- <div>
- <span @click="changeFn(0)"></span>
- <span @click="changeFn(1)"></span>
- <span @click="changeFn(2)"></span>
- </div>
- </template>
- <script>
- data () {
- return {
- types: 0,
- },
- methods: {
- changeFn (type) {
- this.types = type
- this.$emit('change-type', type) // 用来触发父组件定义的 @change-type
- }
- }
- </script>
$emit 调用父组件方法, 接收两个参数 [父组件方法名, 传递的参数]
父组件中 on 绑定的方法名应该同步于 $emit 调用的
缺点是父组件必须存在此方法, 否则会报错
v-model 配合 input 事件
父组件:
- <template>
- <parent v-model="onChangeType"></parent>
- </template>
子组件:
- <template>
- <div>
- <span @click="changeFn(0)"></span>
- </div>
- </template>
- <script>
- data () {
- return {
- },
- methods: {
- changeFn (type) {
- this.$emit('input', type) // 用来触发父组件定义的 @input
- }
- }
- </script>
v-model 原则上也是利用 $emit 以及 on
v-model 会默认绑定 input 事件
来源: http://www.qdfuns.com/article/49449/b79c5c32bd341c6d02202b69a6cde002.html