VUE的基础语法（四）----------------组件部分-------------------

首先Vue的内置组件有5种：

1.component　　　　渲染一个”元组件“为动态组件，根据is的值来决定哪个组件被渲染。

①注册一个组件　　　　注意，组件一定要先注册再实例化渲染。但是局部注册的组件一定要在父模板中使用

<div id="app">
	<my-component></my-component>
	{{name}}
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

　　　　Vue.component('my-component', {
　　　　　　template: '<p>我是一个p标签</p>'
　　　　})
　　　　var second = {
　　　　　　template: '<div>我是通过局部注册的组件</div>';
　　　　}
　　　　var app = new Vue({
　　　　　　el: '#app',
　　　　　　data: {
　　　　　　　　name: '123'
　　　　　　},
　　　　　　components: {
　　　　　　　　'my-zujian': second
　　　　　　}
　　　　})

</script>	    

 父子组件之间的通讯

        <div id="app">
            <input type="text" v-model='wenben'/>
            <div v-text="name"></div>
            <div>{{dat.name}}</div>
            <my-component v-bind:datainfo="wenben"></my-component>//这里的datainfo对应的就是子组件里面的props，然后wenben对应的是父组件里面的变量
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var data = {count:0};
            var bgg = {
                props:['datainfo'],
                template:'<div><p>我是一个{{datainfo}}标签</p><b>我是一个{{datainfo}}{{xm}}标签{{datainfo}}</b></div>',
                data:function(){
                    return {
                        xm:'这是一个xm'
                    }
                }
            };
            var div = document.querySelector("#app");
            var app = new Vue({
                el:"#app",
                data:{
                    name:'123123123',
                    dat:{
                        name:"xiongmao",
                        age:18,
                        sex:this.wenben
                    },
                    wenben:''
                },
                methods:{
                },
                components:{
                    'my-component':bgg
                }
            });
        </script>