1.局部组件

1.1 代码


<!DOCTYPE html>
<html lang="en">
<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>
</head>

<body>
    <div id="app">
        <!-- 父组件向子组件传值 -->
        <!-- 1.父组件传递数据过来 -->
        <!-- <itembox my_title="微信小程序"></itembox>
        <itembox my_title="vue开发"></itembox>
        <itembox my_title="java开发"></itembox> -->

        <!-- 灵活传值 -->
        <!-- 第一种写法 循环数组 -->
        <itembox :my_title="item" v-for="item in arrs"></itembox>
        <!-- 第二种写法 循环对象 -->
        <itembox :title="item.title" :des="item.des" v-for="item in arrObj"></itembox>
        <hr>
        <h2>{{title}}</h2>
    </div>
    <hr>
    <div id="app2">
        <!-- 对于局部组件来说,就没有用了 -->
        <itembox></itembox>
    </div>
    <script src="./js/vue.js"></script>
    <script>

        var itembox = {
            //3.将数据放到模板中
            template:`
                <div style="background:#efefef;margin:10px">
                    <h1 @click="clickH1">Web前端开发</h1>
                    <!--<p>{{my_title}}</p>-->
                    <p>{{des}}</p>
                </div>
            `,
            //注意:子组件中和父组件不一致,它是一个方法
            data() {
                return {
                    // des: "Java"
                }
            },
            methods: {
                clickH1(){
                    console.log("123")
                }
            },
            //2.接收我们传递过来的数据
            props:["my_title","title","des"]
        }

        var vm=new Vue({
           el:'#app',
           data:{
                title: "Vue开发",
                arrs: ["java","js","html5+css3","微信小程序开发","NodeJs"],
                arrObj: [
                    {
                        title: "标题1",
                        des: "描述1"
                    },
                    {
                        title: "标题2",
                        des: "描述2"
                    }
                ]
            },
           methods:{

           },
           //创建一个局部组件(可以添加多个组件)
           components: {
               //将下面进行抽离(如果属性和值一样的情况下,可以直接写一个属性)
            //    itembox: itembox
                itembox
                // {
                //    template:`
                //         <div>
                //             <h1>Web前端开发</h1>
                //             <p>Vue开发</p>
                //         </div>
                //    `
                // }
           }
        });
    </script>
</body>

</html>

1.2 显示效果

1.3 在线运行

点击下面链接,即可在线运行

http://www.68yun.top/demo/vue/2.6.html

最后修改:2021 年 02 月 22 日 01 : 26 PM