Vue组件、组件传值和组件插槽

Vue组件、组件传值和组件插槽

一、Vue组件：

1.组件 (Component) 是 Vue.js 最强大的功能之一，通过组件可以扩展 HTML 元素，封装可重用的代码； 2.组件是可复用的 Vue 实例，与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等 3.组件注册： 3.1 组件参数的data值必须是函数 同时这个函数要求返回一个对象 3.2 组件模板必须是单个根元素 3.3 组件模板的内容可以是模板字符串 3.4 组件可以重复使用多次 ；因为data中返回的是一个对象所以每个组件中的数据是私有的，即每个实例可以维护一份被返回对象的独立的拷贝 3.5 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件； 命名：Vue.component(‘HelloWorld’… 使用：< hello-world > a.全局注册 a.1 全局组件注册后，任何vue实例都可以用

<div id="app"> <button-counter></button-counter> <button-counter></button-counter> <hello-world></hello-world> </div> <script type="text/javascript"> Vue.component('HelloWorld', { data: function(){ return { msg: 'HelloWorld' } }, template: '<div>{{msg}}</div>' }); Vue.component('button-counter', { // 1、 data: function(){ return { count: 0 } }, // 2、组件模板必须是单个根元素;组件模板的内容可以是模板字符串 template: ` <div> <button @click="handle">点击了{{count}}次</button> <button>测试123</button> # 6 在字符串模板中可以使用驼峰的方式使用组件 <HelloWorld></HelloWorld> </div> `, methods: { handle: function(){ this.count += 2; } } }) var vm = new Vue({ el: '#app', data: { } }); </script>

b.局部注册：只能在当前注册它的vue实例中使用

//定义： //对应组件名的实际组件 var HelloWorld = { data: function(){ return { msg: 'HelloWorld' } }, template: '<div>{{msg}}</div>' }; //局部注册组件名 var vm = new Vue({ el: '#app', data: { }, components: { 'hello-world': HelloWorld, } }); //使用 <div id="app"> <!-- 不能使用驼峰命名 --> <hello-world></hello-world> <test-com></test-com> </div>

二、Vue组件之间传值

父组件向子组件传值(子组件props:属性；父组件绑定) 父组件传值形式是以属性的形式绑定值到子组件身上。 父组件： <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post> new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ] } })

子组件：

Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })

2.子组件向父组件传值 （实例对象的方法$emit：发射，发射自定义事件名称和参数 父组件监听自定义的事件名称和定义处理函数

a. 子组件用$emit()触发事件： 子组件监听按钮的点击事件对应的处理就是：触发另一个自定义的事件，并该事件的处理函数传递参数: $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据

Vue.component('menu-item', { props: ['parr'], template: ` <div> <ul> <li :key='index' v-for='(item,index) in parr'>{{item}}</li> </ul> <button @click='$emit("enlarge-text, 5")'>扩大父组件中字体大小</button> </div> ` });

b. 父组件用v-on(缩写@) 监听子组件的事件 监听: @enlarge-text=‘handle’ 解析:@子组件定义的事件名称=‘父组件实际处理函数’

父组件: <div id="app"> <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div> <menu-item :parr='parr' @enlarge-text='handle'></menu-item> </div> var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', parr: ['apple','orange','banana'], fontSize: 10 }, methods: { handle: function(val){ // 扩大字体大小 this.fontSize += val; } } }); 兄弟组件之间的传递 (事件中心hub，事件触发 hub的emit()，事件中心监听hub.$on|off) ;兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据; var hub = new Vue() 全局下创建hub对象，其实就是vue实例 a. 传递数据方: 通过一个事件触发emit(自定义事件名称，传递的数据) Vue.component('test-tom', { data: function(){ return { num: 0 } }, template: ` <div> <div>TOM:{{num}}</div> <div> <button @click='handle'>点击</button> </div> </div> `, methods: { handle: function(){ //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据) 触发兄弟组件的事件 hub.$emit('jerry-event', 2); } }, });

b. 接收数据方，【通过mounted(){} 钩子中】 事件中心监听hub.$on(事件名称，事件处理箭头函数)

Vue.component('test-jerry', { data: function(){ return { num: 0 } }, template: ` <div> <div>JERRY:{{num}}</div> <div> <button @click='handle'>点击</button> </div> </div> `, mounted: function() { // 3、接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名 hub.$on('jerry-event', (val) => { this.num += val; }); } });

接收方：mounted中调用事件中心监听组件1中自定义的事件名称和接收参数val hub.$on(‘jerry-event’, (val) => {this.num += val; });

销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

d. 发送方变为接收方，在mounted中添加监听；接收方变发送方则emit发送函数名称和参数；

三、组件插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的 例如，设想一个带有如下模板的 组件：

<span> <slot>{{ user.lastName }}</slot> </span>

我们可能想换掉备用内容，用名而非姓来显示。如下：

<current-user> {{ user.firstName }} </current-user>

然而上述代码不会正常工作，因为只有 组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 元素的一个 attribute 绑定上去：

<span> <slot v-bind:user="user"> {{ user.lastName }} </slot> </span>

绑定在 元素上的 attribute 被称为插槽 prop 。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

独占默认插槽的缩写语法： 在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

<current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user> 或 <current-user v-slot="slotProps"> {{ slotProps.user.firstName }} </current-user>

插槽的作用之一：后备内容 有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 组件中： 我们可能希望这个 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 标签内：

<button type="submit"> <slot>Submit</slot> </button>

现在当我在一个父级组件中使用 并且不提供任何插槽内容时：

<submit-button></submit-button> //解析 //后备内容“Submit”将会被渲染： //<button type="submit"> // Submit //</button>

但是如果我们提供内容：

<submit-button> Save </submit-button> //解析 //<button type="submit"> // Save //</button>

作用域插槽 【有时让插槽内容能够访问子组件中才有的数据是很有用的。】 例如，设想一个带有如下模板的《 current-user》(<>) 组件：

<span> <slot>{{ user.lastName }}</slot> </span> //此时的user是子组件current-user的data里面的数据

我们可能想换掉备用内容，用名而非姓来显示。如下： 父组件使用current-user时

<current-user> {{ user.firstName }} </current-user> //此时的user是父组件的data里面的user

然而上述代码不会正常工作，因为只有 组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让(子组件current-user的) user 在父级的插槽内容中可用，我们可以将 user 作为 《slot》 (<>)元素的一个 attribute 绑定上去：

<span> //为了避免混淆，一般是:user="user" <slot v-bind:user="user"> {{ user.lastName }} </slot> </span>

绑定在 《slot》 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

//slotProps.user对应上面:user="user"的第一个user <current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user> //在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。 //简写 <current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user> //或者 <current-user v-slot="slotProps"> {{ slotProps.user.firstName }} </current-user>

即子组件的user通过绑定，将值传到了父组件，实现了 【有时让插槽内容能够访问子组件中才有的数据是很有用的。】

疑问：与在子组件用$emit向父组件传递数据有什么不同？ 作用域插槽应用案例: https://blog.csdn.net/weixin_41196185/article/details/88344462.