$event

1.在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象
2.在子组件中通过$emit注册事件，将数据作为参数传入，在父组件中通过$event接收

props 传递数据

静态传值

  1. <div id="app4">
  2.    <my-component4 message="数据来自父组件"></my-component4>
  3. </div>
  1. Vue.component('my-component4',{
  2.    props: ['message'],
  3.    template: '<div>{{message}}</div>'
  4. });
  6. var app4 = new Vue({
  7.    el: '#app4'
  8. });
  1. <div id= ” app4”>
  2. 　　<div ＞来自父组件的数据＜／ div>
  3. </div>

动态传值

  1. <div id="app5">
  2.    <input type="text" v-model="text">
  3.    <my-component5 :my-text="text"></my-component5>
  4. </div>
  1. Vue.component('my-component5',{
  2.    props: ['myText'],
  3.    template: '<div>{{myText}}</div>'
  4. });
  6. var app5 = new Vue({
  7.    el: '#app5',
  8.    data: {
  9.        text: '动态传递父组件数据'
  10.    }
  11. });

:::info 注意：1.如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind ，传递的仅仅是字符串。 :::

绑定整个对象

  1. todo: {
  2.   text: 'Learn Vue',
  3.     isComplete:false
  4. }
  1. <todo-item v-bind="todo"></todo-item>
  2. //等价于
  3. <todo-item 
  4.   v-bind:is-complete="todo.isComplete"
  5.   v-bind:text="todo.text"></todo-item>

slot分发

简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

将放在子组件里的不同html标签放在不同的位置
父组件在要分发的标签里添加 slot=”name名” 属性
子组件在对应分发的位置的slot标签里，添加name=”name名” 属性，
然后就会将对应的标签放在对应的位置了。

  1. <div id="app">  
  2.     <children>  
  3.         <span slot="first">12345</span>  
  4.         <span slot="second">56789</span>  
  5.         <!--上面这行不会显示-->  
  6.     </children>  
  7. </div>  
  8. <script>  
  9.     var vm = new Vue({  
  10.         el: '#app',  
  11.         components: {  
  12.             children: {    //这个无返回值，不会继续派发  
  13.                 template: "<button><slot name='first'></slot>为了明确作用范围，<slot name='second'></slot>所以使用button标签</button>"  
  14.             }  
  15.         }  
  16.     });  
  17. </script>
  1. <button>
  2.   <span slot="first">12345</span>
  3.   为了明确作用范围，
  4.   <span slot="second">56789</span>
  5.   所以使用button标签
  6. </button>

⑤分发内容的作用域：

被分发的内容的作用域，根据其所在模板决定，例如，以上标签，其在父组件的模板中（虽然其被子组件的children标签所包括，但由于他不在子组件的template属性中，因此不属于子组件），则受父组件所控制。

当点击文字12345的区域时（而不是按钮全部），会触发父组件的tobeknow方法。
但是点击其他区域时则没有影响。
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译

该slot标签内有内容，那么在无分发内容的时候，会显示该slot标签内的内容。

event自定义函数

  • 使用 Event 构造函数
  • 使用 CustomEvent 构造函数
  • 使用 document.createEvent 来创建自定义事件，但从函数返回的对象所公开的大多数方法已被弃用，这里就不进行介绍

    使用event构造函数

    1. //事件不区分大小写，因此 myevent、myEvent 和 MyEvent 都相同。
    2. //构造函数还接受一个对象，该对象指定与事件有关的一些重要属性
    3. const myEvent = new Event('myevent', {
    4. //是否冒泡，通过 event.stopPropagation() 停止事件的传播
    5. bubbles: true,
    6. //是否可以取消，原生 DOM 事件在默认情况下是可取消的，
    7. //因此您可以对它们调用 event.preventDefault()，这将阻止事件的默认操作。
    8. cancelable: true,
    9. //omposed 属性指定事件是否应从 shadow DOM（使用 Web 组件时创建）冒泡到真实 DOM。
    10. composed: false
    11. })

    CustomEvent 构造函数

    当使用 Event 构造函数创建事件时，我们受到一个限制， 即我们无法通过事件将数据传递给监听器。在这里，任何需要传递给监听器的数据都可以在 detail 属性中传递，该属性是在初始化事件时创建的。
    1. const myEvent = new CustomEvent('myevent', {
    2. //用于传递参数
    3. detail: {},
    4. bubbles: true,
    5. cancelable: true,
    6. composed: false
    7. })
    监听事件 ```javascript const ele = document.querySelector(‘#someElement’)

ele.addEventListener(‘myevent’, event => { console.log(‘我正在监听一个自定义事件’) })

  1. 派发事件
  2. ```javascript
  3. ele.dispatchEvent(MyEvent)

运行后，将正常输出：我正在监听一个自定义事件。