first commit

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/VUE基础/组件.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="app">
+        <!-- 父传子的写法1 -->
+        <abc :xixi="text"></abc>
+
+        <!-- 局部组件的两种写法 -->
+        <!-- <c></c> -->
+        <!-- 父传子的写法2 -->
+        <def></def>
+        <def :x="'2333 传了参数'"></def>
+
+        <!-- 子传父 -->
+        <def @click="get" :x="'2'"></def>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    // 父组件————>子组件 传数据 用！！props！！
+    //    方法1:在子组件定义一个数组(props:['xx'])  >  Vue-datd中写一个值(text:'xx')  >  <xx(子组件标签名) :xx(数组中的名字)="text"  >  子组件中template写<h2>{{xx(数组中的名字)}}<h2>
+    //    方法2:在子组件定义一个对象(props:{xx:{}})  >  <xx(子组件名) :xx(props里的xx)  >  子组件中template写<h2>{{xx(props里的xx)}}<h2>
+
+    // 子组件————>父组件 $emit  借助这个把数据抛出去 $parent
+
+
+
+
+    // 全局组件(两个参数  '名字（不能是html默认标签的名字）'，值（必须是{}）)
+    Vue.component('abc', {//abc是标签名 可以随便取名
+        // template就是html标签 必须写
+        template: `
+        <div>
+            <h2>{{title}}</h2>
+            //父传子的写法1
+            <h2>{{xixi}}</h2>
+        </div>
+        `,
+        // 写法1
+        props: ['xixi'],
+
+        data() {
+            return {
+                title: '我是全局组件',
+
+            }
+        },
+        created() {
+            console.log("我是全局组件的生命周期：", this);
+        },
+
+    })
+
+    // 局部组件   def是变量名 不是标签名
+    var def = {
+        template: `
+        <div>
+            <h2>{{title}}</h2>
+            //父传子的写法2
+            <h2>{{x}}</h2>
+            //子传父
+            <h2 @click="submit">{{x}}</h2>
+        </div>`,
+        // 写法2
+        props: {
+            x: {
+                default: "父组件向子组件传数据方法2 没传参数默认写",
+                type: String
+            }
+        },
+        data() {
+            return {
+                title: '我是局部组件',
+                list: "子传父"
+            }
+        },
+        created() {
+            console.log("我是局部组件的生命周期：", this);
+        },
+        methods: {
+            submit() {
+                this.$emit("change", this.list)//两个参数 参数1:自定义名字 参数2:要抛出去的值
+            }
+        }
+    }
+
+    new Vue({
+        el: '.app',
+        data: {
+            text: '父组件向子组件传数据 方法1'
+        },
+        methods: {
+            get(val) {
+                console.log("父组件收到的数据:", val);
+            }
+
+        },
+        // 局部组件
+        components: {
+            // 方法一
+            //"c": def, //非简写
+
+            // 方法二
+            def  //当名字和值一样时（def（标签名）：def（变量名））可以简写为（def）
+        }
+    })
+</script>
+
+</html>