VUE第四天-组件以及插槽

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="./vue-2.4.0.js"></script>
</head>

<body>
    <div id='app'>
        <!-- 组件的使用  当作标签使用 -->

        <son4></son4>
        <son4></son4>
        <son4></son4>

        <son5></son5>
        <son6></son6>

        {
  {msg2}}

    </div>
<!-- 
    <div id='app2'>
        

        <son4></son4>
        <son4></son4>
        <son4></son4>




    </div> -->



    <!-- 4 -->
    <template id="son4">
        <div>
            son4{
  {msg}}

            <input type="text" v-model="msg" name="" id="">
            <button @click="addList">点我数据添加</button>
            <div v-for="(item,index) in list" :key="index">{
  {item}}</div>

        </div>

    </template>

    <template id="son5">
        <div>
            son5{
  {msg2}}
        </div>
    </template>


    <template id="son6">
        <div>
            son6{
  {msg2}}
        </div>
    </template>

    <script>
        // let obj = {age:10}
        // let obj2 = {age:10}
        // console.log(obj == obj2);

        // 4
        Vue.component("son4", {
            template: "#son4",

            // 目的：数据隔离，互不影响
            data() {
                return {
                    msg: 'hello',
                    list: [4, 5, 6, 7, 8]
                }
            },
            methods: {
                addList() {
                    this.list.push(9)
                }
            }
        })

        let son5 = {
            template: "#son5",
            data(){
                return {
                    msg2:"hello2"
                }
            }
        }
        let son6 = {
            template: "#son6",
            data(){
                return {
                    msg2:"hello2"
                }
            }
        }


        const vm = new Vue({
            el: '#app',
            data: {
                msg2:"这是app里面的"
            },
            methods: {

            },
            components: {
                // 'son5': {
                //     template: "#son5"
                // }
                son5,son6
            }
        })

        // const vm2 = new Vue({
        //     el: '#app2',
        //     data: {},
        //     methods: {

        //     },
        // })
    </script>
</body>

</html>

1.3使用components属性定义局部子组件

最低0.47元/天解锁文章

十一点就睡a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE第四天-组件以及插槽

今日任务：掌握组件的创建方式掌握插槽的使用方法一、知识点vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用 1.1 全局组件定义的四种方式1.使用 Vue.exten
复制链接

扫一扫