Vue组件

组件

'''
1.根组件：new Vue()创建的组件，一般不明确自身的模版，模版就采用挂载点
2.局部组件：local-component={}
3.全局组件：Vue.component({})
'''
'''
1.一个组件就是一个vue实例
2.组件具有自身的template
3.组件的模版只能有一个根标签
4.子组件的data具有作用域，以达到组件的复用，每个组件的数据独有
'''

变量声明的关键字

'''
没有关键字：全局作用域
var:没有块级，有局部作用域
let:有块级，有局部作用域
const:有块级，有局部作用域，是常量
'''

局部组件

第三步
<div id="app">
    <!--html代码不区分大小写，该名字使用子组件是不合法的命名-->
    <!--<localTag></localTag>-->
    <!--<local></local>-->

    <!--组件的复用-->
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>


<script>
    第一步
    var localTag = {
        template: '<div class="local" style="color: orange" @click="btnAction">{{ name }}组件</div>',
        // 子组件的数据与方法由子组件自身提供
        data: function () {
            return {
                name: '局部'
            }
        },
        methods: {
            btnAction: function () {
                alert('你丫点我了')
            }
        }
    };
    
    第二步
    new Vue({
        el: "#app",
        components: {
            // local: localTag
            // 'local-tag':localTag
            // localTag: localTag,
            // 1.js的驼峰命名(localTag)对应的是html的连接命名(local-tag)
            // 2.key与value的变量名一致，可以简写
            localTag
        }
    });
</script>

全局组件

<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script>
    Vue.component('global-tag', {
        template: '<div @click="btnClick">{{ name }}组件被点了{{ n }}下</div>',
        // 组件被复用一次，就会产生一个新的局部作用域，使用一套数据
        data: function(){
            return {
                n: 0,
                name: "全局"
            }
        },
        methods: {
            btnClick: function () {
                this.n += 1
            }
        }
    });
    new Vue({
        el: "#app"
    })
</script>

父组件传递数据给子组件

　　通过绑定属性的方式进行数据传递

<div id="app">
    <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
    Vue.component('global-tag', {
        props:['sup_data1', 'supdata2'],
        template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
    })
    new Vue({
        el: '#app',
        data: {
            sup_data1: '数据1',
            sup_data2: '数据2'
        }
    })
</script>

子组件传递数据给父组件

　　通过发送事件请求的方式进行数据传递

<div id="app">
    <global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
    Vue.component('global-tag', {
        data () {
            return {
                sub_data1: "数据1",
                sub_data2: '数据2'
            }
        },
        template: '<div @click="clickAction">发生</div>',
        methods: {
            clickAction () {
                this.$emit('send_action', this.sub_data1, this.sub_data2)
            }
        }
    })
    new Vue({
        el: '#app',
        methods: {
            receiveAction (v1, v2) {
                console.log(v1, v2)
            }
        }
    })
</script>

父子组件实现todoList

<div id="app">
    <div>
        <input type="text" v-model="val">
        <button type="button" @click="submitMsg">提交</button>
    </div>
    <ul>
        <!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->
        <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>
    </ul>
</div>
<script type="text/javascript">
    Vue.component("todo-list", {
        template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>",
        props: ['v', 'i'],
        methods: {
            delect_action () {
                this.$emit("delect_action", this.i)
            }
        }
    })
    
    new Vue({
        el: "#app",
        data: {
            val: "",
            list: []
        },
        methods: {
            submitMsg () {
                // 往list中添加input框中的value
                if (this.val) {
                    this.list.push(this.val);
                    this.val = ""
                }
            },
            delect_action(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>