Vue—组件，父传子，子传父

组件

• 每一个组件都是一个vue实例

• 每个组件均具有自身的模板template，根组件的模板就是挂载点

• 每个组件模板只能拥有一个根标签

• 子组件的数据具有作用域，以达到组件的复用
  

换行自动帮你加上+号，现在想个办法可以随意换行需要加上反引号``

但是这种写法还不支持样式，会报错

<div id="app">
<h1>组件概念</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        template:`<div>
<h1 style="color: red;">组件渲染的模板</h1>
<h2 @click="action">副标题</h2>
</div>`,
        data: {

        },
        methods:{
            action:function () {
                alert(123)

            }
        }
    })
</script>

Vue的实例其实就是一个组件，有html模板，有css样式，又有js逻辑的集合体

根组件的模板就是用挂载点，子组件必须自己定义template

局部组件

里面没有el了被template替换掉了

组件模板只能有一个根标签

<div id="app">
    <!--div.box>h1{标题}+(p.p${文本内容}*2)-->
    <abc></abc>
    <abc></abc>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // 定义局部组件
    let localTag = {
        // 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
        // 2.data的值就是一个存放数据的字典
        // 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
        data: function () {
            return {
                count: 0,
                // r: ''
            }
        },
        template: `
        <div class="box" style="border: solid;  100px">
            <h1>标题</h1>
            <p class="p1">文本内容</p>
            <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
            <button @click="send"></button>
        </div>
        `,
        methods: {
            action: function () {
                this.count++
            },
  new Vue({
        el: '#app',
        data: {

        },
        // 局部组件必须注册
        components: {
            'abc': localTag
        }
    })
</script>

全局组件

Vue.component();这就相当于创建了一个全局组件Vue.component(组件名，（组件主体）)

全局组件无需注册

html默认转换成小写，在标签中建议使用-语法，js中用驼峰语法

<div id="app">
    <old-boy></old-boy>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    Vue.component('OldBoy',{
        data:function(){
            return {
                count:0
            }
        },
         template:`
        <div class="box" style="border: solid; 100px">
        <h1>全局</h1>
        <p class="p1">文本内容</p>
        <p @click="action" class="p2" style="background-color: green">被点击了{{ count}}下</p>
    </div>
        `,
        methods:{
            action:function () {
                this.count++

            }
        }
    });

    new Vue({
        el: '#app',
        data: {

        }
    })
</script>

信息父传子

注册中key和value值一样的情况下可以简写，本质上是'localTag':localTag

local-tag就可以理解为自定义标签，使用msg变量值由父组件提供

local-tag标签代表的是子组件，owen为标签的自定义属性

在子组件内部能拿到owen，就可以拿到父组件的信息

<div id="app">
    <local-tag :zyl="msg"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        // 子组件拿自定义属性
        props: ['zyl'],
        template: `
        <div>
            <h1>信息</h1>
            <p>{{ zyl }}</p>
        </div>
        `
    };

    new Vue({
        el: '#app',
        data: {
            msg: '父级的信息'
        },
        components: {
            // 'localTag': localTag,
            // localTag: localTag,
            localTag  // 在页面中 <local-tag>
        }
    })
</script>

信息子传父

 父先产生，子是由父级加载出来的，父级的数据先产生

<div id="app">
    <h1>{{ title }}</h1>
    <global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    Vue.component('global-tag', {
        template: `
        <div>
            <input type="text" v-model="msg">
            <!--<button @click="action">修改标题</button>-->
        </div>
        `,
        data: function () {
            return {
                msg: ''
            }
        },
        methods: {
            // action: function () {
            //     let msg = this.msg;
            //     // recv是自定义的事件
            //     this.$emit('recv', msg)
            // }
        },
        watch: {
            msg: function () {
                this.$emit('recv', this.msg)
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            title: '父组件定义的标题'
        },
        methods: {
            get_title: function (msg) {
                this.title = msg
            }
        }
    })
</script>