Vue 04组件

创建组件的三种方式

组件中的data和methods

组件中的data是一个方法，且必须返回一个对象

<template id="temp">
    <div>
        <h3> {{count}}</h3>
        <input type="button" value="+" @click="add">
    </div>
</template>
<script>
    Vue.component('mycom1',{
        template: '#temp',
        data: function () {
            return {count:0}
        },
        methods: {
            add: function () {
                this.count++;
            }
        }
    })
</script>

组件切换 和 通过ref来获取DOM节点

使用component标签来实现切换组件

<component v-bind:is='组件名称'><component>

在标签和组件中加入 ref=“my”
可以通过 this.$refs.my. 什么来获取标签内容或者组件的方法和data 相当于document.getelementbyid这种方式

<h1 ref="my">ref</h1>
<temp :title="msg" @func="show" ref="zujian"></temp>
this.$refs.my.style.color = 'red';//相当于操作dom
this.$refs.my.innerText = '这是通过 this.$refs 改变的';

子父组件互相传值

父组件向子组件传值：在定义组件时，需要在props定义一个属性，即props:[‘title’],当使用组件时候，可以在组件中使用这个属性
v-bind:title=“msg”，指向的这个值是父组件中data中的值，这样就可以实现父组件向子组件传值，在子组件通过使用定义的这个组件来使用即title。
子组件向父组件传值：通过定义调用父组件中方法，在使用子组件的时候，传入一个自定义的事件指向父组件的方法v-on:func=“show”,在组件中的按钮被点击时触发的方法定义在子组件的方法 this.$emit(‘func’,传入的值)，这样就可以使用方法把子组件的值传入到父组件中。

<temp v-bind:title="msg" @func="show"></temp>
<template id="temp1">
<!--    要显示父组件的值，传递过来的变量必须是模板中定义的变量-->
    <div>
        <input type="button" @click="showa" value="父组件方法">
        <h1>我是h1------->{{title}}</h1>
    </div>
</template>

<script>
    var temp = {//定义的组件对象
        props:['title'],
        template: "#temp1",//通过id找到对应的模板对应
        data:function(){
          return {
              msg: '这是子组件中msg'，
              date:20
          }
        },
        methods: {
            showa:function () {
                this.$emit('func',this.data)//这个data是子组件的data=20，通过子组件调用父组件的方法传子组件值得方式，把值传入到父组件中
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
            data: null,
            msg: '我是父组件的msg'
        },
        methods: {
            show: function (data) {
                this.data = data;
            },
        },
        components:{
            temp
        }
    })
</script>