VUE框架进阶二

2024-01-25 17:46:40

1.组件

使用局部组件：

1.创建、挂载、运用。

例：

 <div id="app">
      <!-- 3.使用子组件 -->
      <App></App>
    </div>
      // 1.创建组件,template要有闭合的标签。
      const App = {
        data() {
          return {
            /* data必须是个函数，返回一个对象 */
            msg: "data必须是个函数",
          };
        },
        template: `
        <div>
          <h1>{{msg}}</h1>
           <button @click = 'handleClick'>按钮</button>
           </div>`,
        methods: {
          handleClick() {
            this.msg = "学习APP";
          },
        },
      };
      new Vue({
        el: "#app",
        data: {},
        /* 2.挂载子组件 */
        components: {
          App: App,
        },
      });

使用全局组件：

例：

<!-- 使用全局组件 -->
      <Vheader></Vheader>
    </div>
      // 1.创建全局组件，第一个参数是组件名、第二个是配置，全局不用再挂载。，只要创建了全局组件，可在任意地方使用（要在template属性里）。
      Vue.component("Vheader", {
        template: `<div>

                我是导航组件
                </div>`,
      });

2.组件间的通信

2.1 父传子

先在子组件声明props:['名字']，用来接受父组件挂载的属性。

然后就可以在子组件的template里使用

在父组件里绑定这个定义的名字

例：

 Vue.component("Child", {
        //声明prop属性
        props:['childData'],
        template: `<div>
              <h3>我是子组件</h3>
              {{childData}}
                </div>`
      })   
      const App = {
        data() {
          return {
            msg: "我是父组件传的值",
          };
        },
        template: `
        <div>
          <Child :childData='msg'></Child>       
          </div>`,
      };

2.2子传父

挂载触发

首先在父组件绑定子组件自定义的事件；实时监控子组件输入的值，子组件里触发原生的@input事件。

然后通过this.&emit（）方法获取在子组件里挂载的事件，触发到对应的方法。

然后this.&emit（“方法名”，值）；

2.3 平行组件

为了实现起来更加简便就不通过上方那种方式实现了。

可以理解为A组件、B组件之间要通信，用一个中间媒介来互相通信。通过$on绑定，$emit触发。就像A把东西放在公交车上，然后运输给B。这时候要确定用的是同一个公交车，不然肯定运输不了。

直接上示例：

      //B
      const bus = new Vue();
      Vue.component("B", {
        data() {
          return {
            count: 0,
          };
        },
        template: `<div>
             {{count}}
                </div> `,
        created() {
          /* $on绑定 $emit触发 */
          bus.$on("add", (n) => {
            this.count += n;
          });
        },
      });
      //a
      Vue.component("A", {
        template: `<div>
           <button @click="addToMe">加入购物车</button>
                </div> `,
        methods: {
          addToMe() {
            bus.$emit("add", 1);
          },
        },
      });

2.4其他的通信方式

provide

inject

父组件 provide提供变量，子组件通过inject注入。只要调用了inject就能拿到父组件提供的变量。

this.$parent可以直接获取到父组件

created(this.$parent.属性)

this.$children就是子组件

码农公寓