vue3模板props问题

最新推荐文章于 2024-08-25 09:57:22 发布

112_13_

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_48143541/article/details/122412372

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.无参数模板

模板不需要传递参数，模板内标签是固定的。

虽然内容固定，但是它支持插值表达式，即可进行简单运算(四则运算+,-,*,/,%外加逻辑运算&,|,!,>>,<<,^,吧)。比如{{1+3}}{{(123>456)}}

其模板为

    app.component("ab", {
      template: `<t2>{{456+123}}</t2>`,
    });

假设已声明 vue 对象 pp，则可添加模板 example如下。

vue对象声明组件需要在挂载之前。即mount(“#asp”)之前。

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="./vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="asp">
      <title_tag title_l="123456" title_r="abc"></title_tag><br />
      <title_tag :title_l="title_a" :title_r="title_b"></title_tag>
    </div>
  </body>
  <script>
      //.....
   </script>
</html>

script代码

 const app = Vue.createApp({
      data() {
        return { 
          title_a: "ook",
          title_b: "error",
        };
      },
    });
    app.component("title_tag", {
      props: ["title_l", "title_r"],
      template: `<a>{{title_l}}---{{title_r}}</a>`,
    });

    app.component("example", {
      template: `<a>abc123</a>`,
    });
    app.mount("#asp");

2.有参数模板

模板通过声明props来接收参数。

传递参数值有两种形式：

固定值，可以像标签的 id src等属性一样，直接赋值。
动态值，把vue对象中data内的变量赋值，这样模板的内容会随着此变量的变化而变化。

2.1非属性参数

html 部分代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="./vue.js"></script>
    <title>vue模板</title>
  </head>
  <body>
    <div id="asp">
      <title_tag title_l="123456" title_r="abc"></title_tag><br />
        
      <title_tag :title_l="title_a" :title_r="title_b"></title_tag>
    </div>
  </body>
    <script>
    //...
    </script>
</html>

其中，script导入的是vue的包，应该不用多说。

HTML部分引用了两次模板，

第一次为声明一个自己写的模板，两个参数大的值是固定的，title_l=“123456” title_r=“abc”。

然后第二个是动态绑定。两个参数的值分别为vue对象app内的变量 title_a: “ook”,title_b: “error”,当这两个变量发生变化时，模板的内容也会发生变化。vue 的特色，数据驱动视图

script代码

const app = Vue.createApp({
      data() {
        return {
          title_a: "ook",
          title_b: "error",
        };
      },
    });
    app.component("title_tag", {
      props: ["title_l", "title_r"],
      template: `<a>{{title_l}}---{{title_r}}</a>`,
    });
    app.mount("#asp");

2.2属性参数

HTML部分代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="./vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="asp">
      <example :style_m="class_red" :click_e="a_click" text="点我red"></example>
      <example
        :style_m="class_green"
        :click_e="b_click"
        text="点我green"
      ></example>
    </div>
  </body>
  <script>
//...
  </script>
</html>

声明两个标签,分别赋值style属性、click事件、显示文本。

script 部分代码

    const app = Vue.createApp({
      data() {
        return {
          title_a: "ook",
          title_b: "error",
          class_red: "background-color:red",
          class_green: "background-color:green",
        };
      },
      methods: {
        a_click() {
          alert("aaaa");
        },
        b_click() {
          alert("bbbbb");
        },
      },
    });
    app.component("example", {
      props: ["text", "click_e", "style_m"],
      template: `<button @click="click_e" :style="style_m">{{text}}</a>`,
    });
    app.mount("#asp");