vue-组件和组件传值

vue组件和组件传值

组件

组件是可复用的vue实例，且带有一个名字，可以通过 new Vue 创建的 Vue 根实例中把这个组件作为自定义元素来使用

<div id="components-demo">
  <button-counter></button-counter>
</div>

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ el: '#components-demo' })

组件中的data必须是一个function,其返回一个对象作为组件的数据

 data() {
          return {
            count: 1,
          };
        }

注册组件

在vue中定义组件有两种常见的形式 全局注册和局部注册

全局注册：通过 Vue.componen定义，第一个参数为组件名 全局组件定义之后可以直接使用不需要注册

Vue.component('my-component-name', {
  // ... options ...
})

局部注册 通过一个普通的 JavaScript 对象来定义组件

此对象包含有一些特殊的属性
template 模板内容
data 组件的数据, data必须是一个function,此function有一个对象做为返回值
methods 方法
computed 计算属性
… 其他的等等等等,所有vue中可以使用的方法或者属性都可以在组件内部使用
定义的组件必须只有一个根节点

局部组件在使用的时候需 components 属性进行注册：

var ComponentA = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
  }
})

组件传值

常见的组件传值有三种：

1、父组件－－子组件传值 使用props

2、子组件向父组件传值 使用事件派发

3、非相关组件之间传值 – 空vue对象 $emit(‘ ’,数据) 发送 $on 接收

1、父到子传值

在子组件的组件标签上绑定自定义属性名,值为父组件需要传递的数据
子组件内部通过props属性 数组形式 接收属性名 ,模版内部加载属性名渲染展示父组件数据
Template 标签内 给子组件设置属性

<v-nav :msg=“msg” :n=“name”></v-nav>

在子组件的components设置
props:[‘msg’,‘n’], /*子组件接收数据*/

子组件的template内通过｛｛｝｝直接绑定数据即可
代码如下：

<div id="out">
        <h1>父组件－子组件</h1>
        <v-parent></v-parent>
    </div>
    
    <template id="parent">
        <div>
            <h1>父组件</h1>
            <p>{{str}}</p>
            <button @click="send()">发送str数据给子组件</button>
            <hr />
            <v-child :a="str1"></v-child>
        </div>
    </template>
    
    <template id="child">
        <div>
            <h2>子组件</h2>
            <p>接收父组件传递的数据：－－{{a}}</p>
        </div>
    </template>

var vm=new Vue({
        el:"#out",
        components:{
            'v-parent':{
                template:'#parent',
                data(){
                    return{
                        str:'我是父组件的数据',
                        str1:''
                    }
                },
                methods:{
                    send(){
                        this.str1=this.str
                    }
                },
                components:{
                    'v-child':{
                        template:'#child',
                        props:['a'],
                        data(){
                            return{
                                
                            }
                        }
                    }
                }
            }
        }
    })

2、子到父传值

在子组件组件标签上绑定自定义事件，子组件内部通过$emit给该事件推送数据，
父组件内部通过事件所绑定的函数参数进行数据接收
代码如下：

<div id="out">
        <h1>子组件－父组件</h1>    
        <v-parent></v-parent>
    </div>
    
    <template id="parent">
        <div>
            <h1>父组件</h1>
            <p>接收子组件的数据：－－{{tit}}</p>
            <hr />
            <v-child @toparent="tap($event)"></v-child>
        </div>
    </template>
    
    <template id="child">
        <div>
            <h1>子组件</h1>
            <p>{{str}}</p>
            <button @click="send()">发送给父组件</button>
        </div>
    </template>
var vm=new Vue({
        el:'#out',
        components:{
            'v-parent':{
                template:"#parent",
                data(){
                    return{
                        tit:''
                    }
                },
                methods:{
                    tap(msg){
                        console.log(msg)
                        this.tit=msg;
                    }
                },
                components:{
                    'v-child':{
                        template:'#child',
                        data(){
                            return{
                                str:'this is childs info'
                            }
                        },
                        methods:{
                            send(){
                                this.$emit('toparent',this.str)
                            }
                        }
                    }
                }
            }
        }
    })

3、非相关组件之间传值

事件总线 解决非相关组件之间传值
我们通过定义一个空白的对象 所有的事件派发和监听都在这个对象上进行
代码如下：

<div id="out">
   	<h1>兄弟组件</h1>
   	
   	<v-a></v-a>
   	<hr />
   	<v-b></v-b>
   	<hr />
   	<v-c></v-c>
   	
   </div>
   
   <template id="a">
   	<div>
   		<h1>AAAAAAAA组件</h1>
   		<p>{{str}}</p>
   		<button @click="send()">发送给CCC组件</button>
   	</div>
   </template>
   
   <template id="b">
   	<div>
   		<h1>BBBBBB组件</h1>
   		<p>{{str}}</p>
   		<button @click="send()">发送给CCC组件</button>
   	</div>
   </template>
   
   
   <template id="c">
   	<div>
   		<h1>CCCCCC组件</h1>
   		<p>接收AAA组件数据：－－{{stra}}</p>
   		<p>接收BBBB组件数据：－－{{strb}}</p>
   	</div>
   </template>
   
</body>
<script type="text/javascript">
   
   var vm1=new Vue({})
   var vm=new Vue({
   	el:"#out",
   	components:{
   		'v-a':{
   			template:'#a',
   			data(){
   				return{
   					str:'AAAAA的数据'
   				}
   			},
   			methods:{
   				send(){
   					vm1.$emit('isa',this.str)
   				}
   			}
   		},
   		'v-b':{
   			template:'#b',
   			data(){
   				return{
   					str:'bbbbbbb'
   				}
   			},
   			methods:{
   				send(){
   					vm1.$emit('isb',this.str)
   				}
   			}
   		},
   		'v-c':{
   			template:"#c",
   			data(){
   				return{
   					stra:'',
   					strb:''
   				}
   			},
   			mounted(){
   				var _this=this;
   				vm1.$on('isa',function(msg){
   					_this.stra=msg
   				})
   				vm1.$on('isb',function(msg){
   					_this.strb=msg
   				})
   				
   			}
   		}
   	}
   })

嗯~~~,就这些