Vue组件——属性传值、插槽

一、属性传值

        在使用组件时，可以给组件添加属性，然后在定义组件的地方添加一个props属性，类型为数组，里面的元素是字符串，数据是属性名，props与data同级，这时候这个属性就成为了this的成员，所以在模板（template）中就可以像数据源的数据一样被访问，得到属性值。也可以用绑定变量的方式，在属性前面加冒号，这样等号后面就是在数据源中取值。

        可以看出上述代码的运行出现了报错，是由于我们对父组件传过来的数据进行了修改。这是因为数据的传递是单向的，父组件中使用子组件进行属性传值时，传过来的属性是只读属性，不能修改。

        从上面还可以发现的是，我们对组件进行了复用，组件中的模板渲染了3次。按钮的点击事件触发时改变了数据源中str的值，显示在页面中的str就改变了，但只改变了一个，组件的另外两次使用中显示的还是原来的值。

        造成这种现象的原因是vue3.x中，在创建vue实例时传递的对象中data是一个函数，而函数的运行每一次都是独立的，每一次使用这个组件时返回的是一个全新的数据对象，这样就避免了数据共享和副作用的问题。

二、插槽slot

        在我们定义组件了在使用时，可以写作单标签，也可以写作双标签。对于双标签，就会思考官方给定的双标签我们都是会写标签的，那么使用组件时是否也能在作为双标签时在标签中间写其他标签呢，答案是可以的。这时候就需要用到插槽slot。

        在定义组件的vue文件中，添加一个双标签slot，里面不写任何东西。然后在使用组件标签时，写在中间的内容就会显示在slot中。

        

        

        插槽分为两种：匿名插槽、具名插槽。上述示例就属于匿名插槽。具名插槽就是给slot添加一个name属性，然后在使用组件时属于一个插槽的内容写在一个template标签中，template标签添加一个指令“v-slot=‘插槽名’”，语法糖写法是“ #插槽名 ”。