好久没用vue,复习一下,有误请指出

一 组件交互

就写写我常用的,我觉得是这三种是够用的,其他的看得少没用过,有空看看用用再写

1.props/$emit 父子传值

props的值不可直接修改

props可以是数组可以是对象。

 props: {
        modal: {
            default: '',
        },
        obj: {
        	type: Object,
        	default: () => ({
        		a:1
        	})
        },
        arr: {
 2 			type: Array,
 3 			default: () => ([])
    	},
    	fun: {
 8 			type: Function,
 9 			default: () => () => {}
10 		}
   }

default为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
props里面的属性都不能被赋值修改，如果修改会报错。如果需要对props里面的属性进行修改，可以在computed使用其他的值

$emit

向父级传递事件,以及数据,数据将作为事件的参数传递

2. $attrs/$listeners 祖孙

有多层嵌套的组件封装时传递数据和事件
$attrs用v-bind绑定在父级组件上即可使用,用来传递隔代的数据
$listeners用v-on绑定在父级上使用,用来绑定隔代的事件
<parent v-bind="$attrs" v-on="$listeners"></parent>

3.vuex

全局状态管理

vuex是用来管理全局的组件状态,那么自然是可以用来传递组件间数据的,并且父子,隔代,兄弟都可以传,数据修改没有局限

二.slot插槽

我觉得slot就是
把父组件的代码块插入到子组件既定的位置

// 父组件
<template>
	<div class="father">
		<son>
			<p>这是父组件正在用子组件</p>
			<span>balabala...</span>
  		</son>
	</div>
</template>


// 子组件
<template>
	<div class="son">
		<slot></slot>
	</div>
</template>

这样就把
<p>这是父组件正在用子组件</p>
<span>balabala...</span>
插入到了son组件中的slot位置

上面这种就是默认插槽,我们还可以插入多个组件表示不同的功能块并给每个插槽起名,这种叫做具名插槽(具有名字的插槽,哈哈)

// 父组件
<template>
	<div class="father">
		<son>
			<p>这是父组件正在用子组件</p>
			<template slot="header">
				header内容
			</template>
			<template slot="content">
				content内容
			</template>
			<template slot="footer">
				footer内容
			</template>
  		</son>
	</div>
</template>


// 子组件
<template>
	<div class="son">
		<div>
			<h3>这里是header</h3>
			<slot name="header"></slot>
		</div>
		<div>
			<h3>这里是content</h3>
			<slot name="content"></slot>
		</div>
		<div>
			<h3>这里是footer</h3>
			<slot name="footer"></slot>
		</div>
	</div>
</template>

这里注意
父组件下的代码块,必须要有slot才能插入,
无名的插入无名的slot,有名的对应名字插入,
无名和有名可同时存在

三.在el-radio组件遇到的案例

如果组件里引用了单选组件，而单选框绑定的值正是通过props里的属性从父组件里传进来，那么当单选组件在切换时，也会报，不能直接修改props里的属性值得错误。

<template>
  <el-radio v-model="radio" label="1">备选项1</el-radio>
  <el-radio v-model="radio" label="2">备选项2</el-radio>
</template>

<script>
  export default {
    props {
      radio: {
        default: '1'
      };
    }
  }
</script>

如上代码，虽然没有自己对radio进行赋值，但是当我们在切换单选项时，组件内部会自动对我们绑定的radio进行赋值，所以我们不应该使用props里绑定的值，radio只是用来接收数据的，并不能直接修改他的值。
所以如果二次封装组件时，如果有用到radio组件，而它绑定的值刚好在props里传递，要使用computed:

<template>
  <el-radio v-model="radioValue" label="1">备选项1</el-radio>
  <el-radio v-model="radioValue" label="2">备选项2</el-radio>
</template>

<script>
  export default {
    props {
      radio: {
        default: '1'
      };
    },
    computed: {
        radioValue: {
            get: function () {
                return this.radio;
            },
            set: function (value) {
                this.$emit('update:radio', value);
            }
        }
    },
  }
</script>