Vue基础----组件通信

vue组件以及父子组件之间的通信


1.如何使用组件
1.1 全局

组件主要是提高代码重用性,让代码可以重复利用。组件在使用之前需要注册组件,注册组件的方法有俩种。一种是全局注册,一种是局部注册。

Vue.component('my-component',{
    template:'
注册组件
'
})

其中my-component是自定义组件名,可以任意命名,推荐小写减号分割的形式。后面的大括号里内容是组件选项,在组件选项加template可以在页面中显示出组件的内容。其内容必须被dom元素包起来,比如说上面的“注册组件”被一组div包裹起来了。

1.2局部
局部组件只在该实例的作用域下才有效,具体代码如下

<div id="app">
        <my-component></my-component>
    </div>
    <script>
        var child = {
            template:''<div>局部注册组件</div>''
        }
        var app = new Vue({
            el:'#app',
            components: {
                'my-comoponent':child
            }
        })
    </script>

总结:template后面的内容就是组件的内容,将会在页面中显示。

2.父组件向子组件传递数据
2.1父传子的基本用法

在将数据传输之前,我们先应该知道哪个是父组件,哪个是子组件。就拿全局的来说,其中是父组件,父组件通过prop正向传递数据给Vue.component中子组件。

props的值有两种,一种是字符串数组,用于传递数据;一种是是对象,用于对props进行验证。后者比较好理解,这里主要来讲一下字符串数组这种形式。

<div id="app">
        <input type="text" v-model= "parentMessage">
        <my-component :Message = "parentMessage"></my-component>
    </div>
    <script>
        Vue.component('my-component',{
            props:['message'],
            template: '
{{ message }}
'
}); var app = new Vue({ el:'#app', data:{ parentMessage: '' } }) </script>

上面的例子中,文本框中v-model与data中parentMessage绑定。当你在文本框输入信息的时候,输入的内容会绑定到data中parentMessage中。父组件中的Message传递到子组件中的props上,子组件于是获取到message这个属性,该属性就会通过template后显示出来。结果如下图所示:

Vue基础----组件通信_第1张图片
2.2父传子应当注意的地方

在子组件中,当你想要改变其中数据的值得时候不能直接改变,应该将改变的过程写在data对象或者计算属性computed里面。

在JavaScript中对象和数组是引用类型,指向同一个内存空间。当props是对象和数字时候,在子组件里面改变值会影响父组件的值。当父组件有多个的时候很明显。子组件里面值改变一个,所有的父组件都会改变。而我们通常期望父组件之间是相互独立的。

3.子组件向父组件传递数据
子组件通过$emit来触发事件,在父组件中能够监听到触发的这个事件去执行一个函数。通过第5个例子来详细讲解子传父的过程。

<div id="app">
       <p>总数:{{ total }}</p>
       <my-component 
       @increase = 'handeleGettotal'
       @reduce = 'handeleGettotal'></my-component>
   </div> 
   <script>
       Vue.component('my-component',{
           template: '\
           
\ \ \
'
, data: function () { return { counter:0 } }, methods: { handleIncrease :function () { this.counter++; //通过$emit()把改变后的counter传递给父组件 this.$emit('increase',this.counter); }, handleReduce :function () { this.counter--; this.$emit('reduce',this.counter); }, } }) var app = new Vue({ el:'#app', data:{ total:0 }, methods: { handeleGettotal: function (total) { this.total = total; } } })

Vue基础----组件通信_第2张图片

你可能感兴趣的:(VUE,vue.js,前端,javascript)