vue组件开发之组件之间的数据交互

组件键数据交互


父组件向子组件传值

  1. 组件内部通过props接收传递过来的值
    Vue.component('menu-item',{
    props:['title',...],//里面的值都是从父组件中传递过来的
    template:'
    {{title}}
    '
    })
  2. 父组件通过属性将值传递给子组件
     <menu-item title='来自父组件的数据'>menu-item> 
     
      <menu-item :title='title'>menu-item>
      
    
    实际上props中的就是给了子组件一个名称,还是需要在创建的标签中给这个名称赋予父组件的值
  3. props属性名规则
    在props中使用驼峰形式,模板中需要使用短横线形式,原因是DOM是不区分大小写的
    在字符串形式的模板中是没有这个限制的
  4. props属性值类型
    字符串 String
    数值 Number
    布尔值 Boolean
    数组 Array
    对象 Object
  5. 基本用法
    props传递数据原则:单向数据流 子组件修改值是不会影响到父组件的值的
    1. 子组件通过自定义事件向父组件传递信息
    <button v-on:click='$emit("enlarge-text")'>扩大字体button>
    
    1. 父组件监听子组件的事件
     ,addTodo)
    eventHub.$off('add-todo')
    
  6. 触发事件
    eventHub.$emit('add-todo',id)//可以携带参数
    

代码示例

 <body>
   <div id="app">
     <div>
       <button @click='handle'>销毁button>
     div>
     <test-tom>test-tom>
     <test-jerry>test-jerry>
   div>
   <script src="./js/vue.js">script>
   <script>
     //创建事件中心管理事件
     var hub = new Vue();
     //创建两个兄弟组件
     Vue.component('test-tom', {
       data: function () {
         return {
           num: 0
         }
       },
       template: `
         
Tom:{{num}}
`
, methods: { handle: function () { hub.$emit('jerry-event',1); } }, mounted: function () { //监听事件 hub.$on('tom-event', (val) => { this.num += val; }) } }); Vue.component('test-jerry', { data: function () { return { num: 0 } }, template: `
Jerry:{{num}}
`
, methods: { handle: function () { //触发兄弟组件的事件 hub.$emit('tom-event',2); } }, mounted: function () { //监听事件 hub.$on('jerry-event', (val) => { this.num += val; }) } }); var vm = new Vue({ el:'#app', data:{}, methods:{ handle:function(){ hub.$off('tom-event'); hub.$off('jerry-event'); } } });
script> body>

你可能感兴趣的:(前端笔记)