vue学习笔记——插槽、自定义事件

插槽slot

Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 元素作为承载分发内容的出口。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title">todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item">todo-items>
    todo>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
    Vue.component("todo",{
        template: '
\ \
    \ \
\
'
}) Vue.component("todo-title",{ props:['title'], template: '
{{title}}
'
}) Vue.component("todo-items",{ props:['item'], template: '

{{item}}

'
}) var vm = new Vue({ el:"#app", data:{ title:"插槽slot", todoItems:['Java','spring','ssm'] } })
script> html>

自定义事件

当子组件需要向父组件传递数据时,就要用到自定义事件。指令 v-on 除了监听 DOM 事件外,还可以用于组件之间的自定义事件。
Vue 组件也有与之类似的一条模式,子组件用 on()来监听子组件的事件。
使用this.$emit(‘自定义事件名’,参数),


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title">todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)">todo-items>
    todo>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
    Vue.component("todo",{
        template: '
\ \
    \ \
\
'
}) Vue.component("todo-title",{ props:['title'], template: '
{{title}}
'
}) Vue.component("todo-items",{ props:['item','index'], template: '

{{index}}---{{item}}

'
, methods:{ remove:function (index) { //this.$emit 自定义事件分发 this.$emit('remove',index) } } }) var vm = new Vue({ el:"#app", data:{ title:"插槽slot", todoItems:['Java','spring','ssm'] }, methods:{ removeItem:function (index) { console.log("删除了"+this.todoItems[index]+"OK") this.todoItems.splice(index,1)//一次删除一个元素 } } })
script> html>

你可能感兴趣的:(vue)