初学第二十七章:vue组件注册/组件之间的传值

本文阅读 1 分钟
首页 VUE基础,Vue3 正文

vue组件注册

  • 全局组件:注册在vue实例上的 使用实例名.component('模板名称',{template:'模板内容'...})

l6h8nnk7.png

  • 局部组件:注册在vue实例选项上的 在内部使用components定义

l6h8q3sh.png

 <div id="app">
      <blog-text></blog-text>
    </div>
    <template id="box">
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>婚否</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(v,k) of shuju">
            <td>{{v.name}}</td>
            <td>{{v.age}}</td>
            <td v-if="v.hun===true">已婚</td>
            <td v-if="v.hun===false">未婚</td>
          </tr>
        </tbody>
      </table>
    </template>
 //全局组件:注册在VUE实例上的
         const app = Vue.createApp();
         app.component("blog-text", {
           template: "#box",
           data() {
             return {
               shuju: [
                 {
                   name: "小王",
                   age: 18,
                   hun: false,
                 },
                 {
                   name: "小刘",
                   age: 20,
                   hun: false,
               },
              {
                   name: "小张",
                   age: 25,
                   hun: true,
                 },
               ],
             };
          },
         });
      //局部组件:注册在VUE实例内部选项内的
      const app = Vue.createApp({
        components: {
          blogText: {
            template: "#box",
            data() {
              return {
                shuju: [
                  {
                    name: "小王",
                    age: 18,
                    hun: false,
                  },
                  {
                    name: "小刘",
                    age: 20,
                    hun: false,
                  },
                  {
                    name: "小张",
                    age: 25,
                    hun: true,
                  },
                ],
              };
            },
          },
        },
      });
      app.mount("#app");

组件传值

  • 父组件->子组件传值

l6h91gk3.png

    <div class="app">
      <blog-text username="admin" email="admin@qq.com"></blog-text>
    </div>
    <template id="box">用户名:{{username}}:邮箱:{{email}}</template>
      const app = Vue.createApp();
      app.component("blog-text", {
        //通过props接收组件传过来的值
        props: ["username", "email"],
        template: "#box",
      });
      app.mount(".app");
  • 子组件->父组件传值/监听子组件事件

l6ha3phh.png

    <div class="app">
      <blog-text @panduan="review"></blog-text>
    </div>
    <template id="box">
      <button @click="cont++">点赞:{{cont}}</button>
      <button @click="$emit('panduan',this.cont)">评价</button>
    </template>
      const app = Vue.createApp({
        methods: {
          review(e) {
            // console.log(e);
            if (e >= 10) {
              // console.log(111);
              alert("谢谢您的评价");
            }
          },
        },
      });
      app.component("blog-text", {
        template: "#box",
        data() {
          return {
            cont: 0,
          };
        },
      });
      app.mount(".app");
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.hui-xiang.cn/archives/173.html
-- 展开阅读全文 --
初学第二十六章:条件渲染/循环渲染/vue改写购物车
« 上一篇 08-05
初学第二十八章:PHP执行原理
下一篇 » 08-09

相关推荐