Vue中prop属性、组件注册(全局+局部)、组件通信、插槽slot

最新推荐文章于 2024-03-22 09:51:41 发布
最新推荐文章于 2024-03-22 09:51:41 发布
阅读量400 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51066068/article/details/124903112
版权

目录

Vue中prop属性作用

Vue组件注册 （全局组件和局部组件）

 Vue组件通信

 Vue插槽slot

Vue中prop属性作用

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <hr />
      <div title="hello">你好</div>
      <!-- //age="38"  age是字符串类型  :age="38" 绑定的age则是数字Number类型 -->
      <my-a title="hello" :msg="msg" :age="38" name="张三"></my-a>
    </div>

    <script>
      let myA = {
        /* props: ["title", "msg"],
              //父组件给子组件传值props接收就可以在子组件中使用 */

        //限制传值的类型，比如只能传递成字符串类型的，而上面的数组就是传什么就直接接收什么
        //转换成对象的写法，可以限制传入接收的数据类型，如果数据类型不对则接收失败
        props: {
          msg: String,
          //age:String,  设置为这个会报警告类型问题
          //age: Number,
          name: {
            //指定数据类型
            type: String,
            //代表子组件希望父组件传值的时候有一个name属性，并且这个name属性是必须有的
            required: true, //表示name属性必须有
          },

          /*  //基本数据类型
          //如果上面没有写 age: Number,那么默认值为100
          age: {
            type: Number,
            default: 100, //设置默认值为100
          }, */

          //复杂数据类型，例如 对象
          obj: {
            type: Object,
            //默认值，针对引用数据类型，Object/Array 都要一个工厂函数的形式返回
            default: function () {},
          },

          //复杂数据类型，例如 数组
          arr: {
            type: Array,
            //默认值，针对引用数据类型，Object/Array 都要一个工厂函数的形式返回
            default: function () {
              return [1, 2, 3];
            },
          },

          //自定义规则
          age: {
            type: Number,
            // validator: function () {},  完整写法
            validator(value) {
              //   if (value >= 50) {
              //     return true;
              //   } else {
              //     return false;
              //   }

              return value >= 50;
            },
          },
        },

        template: `
                  <div>A组件--{{msg}}--{{age}}</div>
                  `,
        data() {
          return {
            comMsg: "A组件的数据msg",
          };
        },
      };

      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        //局部注册
        components: {
          "my-a": myA,
        },
        data: {
          msg: "hello world",
        },
        methods: {},
      });
    </script>
  </body>
</html>

Vue组件注册 （全局组件和局部组件）

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <br />
      <div>A</div>
      <!-- <my-com-a></my-com-a> -->
      <br />
      <div>B</div>
      <my-com-b></my-com-b>
    </div>

    <script>
      //第一步：声明组件
      let myComA = {
        template: `
              <div>A组件</div>
          `,
      };

      //什么是父组件 子组件  问题：组件通信 父子组件之间通信
      let myComB = {
        //局部注册,在哪里用写到哪里
        components: {
          "my-com-a": myComA,
        },
        //可以在myComB组件里使用myComA里面的组件
        //组件里面定义模板的时候只能有一个根标签，写在外面会报错或者没有渲染效果显示出来
        template: `
            <div>B组件
                <my-com-a></my-com-a>
            </div>
             
          `,
      };

      //第二步：全局注册组件
      //   Vue.component("my-com-a", myComA);
      Vue.component("my-com-b", myComB);

      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        methods: {},
      });
    </script>
  </body>
</html>

 Vue组件通信

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <h3>父子组件如何进行通信--传递属性</h3>

      <!-- :title="msg"  如果没有这样绑定则展示的是你好 -->
      <div title="你好" :title="msg">msg</div>
      <!-- 父组件给子组件传值，通过属性绑定的方式传值，可以动态，可以静态 ：子组件需要用props选项进行接收-->
      <hr />
      <my-com :msg="msg" title="你好"></my-com>

      <hr />
      <!-- {{comMsg}}  这个模板就相当于父组件，拿不到子组件myCom里面的值-->
      <!-- 子组件给父组件传参，通过事件发射的方式传递 -->
      <!-- 父组件通过事件绑定来接收子组件传递的数据  @-->
      <my-com :msg="msg" title="你好" @my-event="myEventHandle"></my-com>

      <hr />
      {{songMsg}}
    </div>
    <script>
      let myCom = {
        //子组件如何接收父组件的属性数据需要通过 prop属性
        props: ["msg", "title"], //接收过来就相当于注册到了data当中
        data() {
          return {
            comMsg: "子组件数据",
          };
        },
        template: `
        <div>
            <span>子组件的msg:{{comMsg}}</span>
            <hr>
            <span>父组件的msg:{{msg}}--{{title}}</span>
            <hr>
            <button @click="toEmit">子组件发送数据</button>

        </div>`,
        methods: {
          toEmit() {
            //内置的方法$emit('事件触发方式',携带的参数，传递的值)
            this.$emit("my-event", this.comMsg, 1234);
          },
        },
      };

      //注册全局
      Vue.component("my-com", myCom);
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          songMsg: "",
        },
        methods: {
          //父组件接收子组件信息
          myEventHandle(a, b, c) {
            console.log(a, b, c);
            this.songMsg = a;
          },
        },
      });
    </script>
  </body>
</html>

 Vue插槽slot

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <hr />
      <my-com></my-com>
      <hr />
      <my-com>
        <!-- //添加给哪个插槽 -->
        <template v-slot:default>aaaa</template>
        <!-- //缩写 #slot2 -->
        <template #slot2>bbbb</template>
      </my-com>
    </div>

    <script>
      let myCom = {
        //如果设置为默认插槽，则都会被  我不好  这个值覆盖
        //如果不想被覆盖，那就要  具名化 进行区分
        template: `
      <div>
        <slot name="default">默认内容1</slot>
        <div>111111111</div>
        <div>222222222</div>
        <slot name="slot2">默认内容2</slot>
      </div>`,
      };
      Vue.component("my-com", myCom);
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        methods: {},
      });
    </script>
  </body>
</html>

 

The..Fuir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中组件的props属性（详）
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
Vue组件中prop属性使用说明实例代码详解
08-27
主要介绍了Vue组件中prop属性使用说明,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下
VUE注册全局组件和局部组件过程解析
10-16
主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue组件和插槽
qq_38806666的博客
12-05 1132
vue组件和插槽
vue组件prop基础介绍
最新发布
qq_43628158的博客
03-22 919
vue组件prop介绍，父组件向子组件传值的方法介绍
每日一学—Vue props 属性
黛琳ghz的博客，期待你的关注。
04-19 8941
props可以像调用方法那样对组件进行传参，当需要给某一个组件传递 props 参数时，这个props 就成为vue组件中的data()对象的一部分，可以直接在组件作用域内使用。
vue组件——插槽的分类(slot、v-slot、slot-scope)以及具体使用（附代码）
秀秀的奇妙旅行
12-06 1213
一、组件的种类以及基础用法vue中组件name的作用1、定义子组件2、定义父组件3、父组件中使用子组件（在父组件中进行子组件局部组件的注册）4、父组件像子组件传递内容二、详细介绍1、默认插槽2、具名插槽3、作用域插槽① 为什么用作用域插槽②如何使用③ 我项目中用到作用域插槽的地方三、插槽的使用情景 一、组件的种类以及基础用法 vue中组件name的作用 vue中组件name的作用 1、定义子组件 2、定义父组件 3、父组件中使用子组件（在父组件中进行子组件局部组件的注册） 得到效果如下 4、父.
Vue系列之插槽（slot）详解
热门推荐
老__L的博客
03-01 4万+
插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。作用域插槽就是实现在子组件自行决定自己要显示什么内容动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
vue 组件注册 插槽使用等知识
qq_40745468的博客
09-03 219
vue 使用自定义组件方法概要
Vue插槽Slot的使用
凉茶铺的博客
01-19 4072
介绍vue中slot插槽的概念和其使用方式
vue中的slot以及vue的prop
wangqiao666888的博客
02-16 889
slot的基本使用 1.什么是 插槽(有三种) 插槽就是父组件往子组件中插入一些内容 默认插槽 默认插槽就是把父组件中的数据，显示到子组件中，子组件通过一个slot插槽标签显示父组件中的数据 具名插槽就是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置 作用域插槽：他是带有数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽来进行不同的展现和填充内容，在标签中通过slot-scope来接收数据 插槽的总结 v-slot的出现是为了代替原
Vue中的 props 属性
游小北的博客
08-11 7022
vue props 的定义的多种方法与注意事项，限制类型、限制默认值、限制不可为空、常见的警告以及解决方案。
详解vue.js全局组件和局部组件
10-20
主要介绍了详解vue.js全局组件和局部组件，实例分析了全局组件和局部的技巧，有兴趣的可以了解一下。
vue组件（全局，局部，动态加载组件）
10-18
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章主要介绍了vue组件（全局，局部，动态加载组件）,需要的朋友可以参考下
深入浅析Vue全局组件与局部组件的区别
08-27
主要介绍了Vue全局组件与局部组件的区别，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue组件（一）：自定义属性 prop
悦涵仙子的技术笔记本
07-16 5174
prop 的大小写 (camelCase vs kebab-case) 当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) <
Vue-注册全局组件的两种方法
crystal_iwwish的博客
12-22 2万+
第一种：在main.js中直接注册 // 引入 import PageTools from '@/components/PageTools' // 注册为全局组件 Vue.component('PageTools', PageTools) 缺点：如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护。 第二种：使用插件的形式注册 在统一注册的入口文件 中 // 引入 import PageTools from './Pa
Vue-注册全局组件插件的两种方法
yinge0508的博客
08-02 7229
Vue-注册全局组件插件的两种方法
Vue的props
qq_50260510的博客
06-07 3139
Vue的props
vue install全局注册组件和局部注册组件
05-26
在 Vue 中，我们可以通过全局注册和局部注册两种方式来注册组件。 全局注册组件： ``` // main.js import Vue from 'vue' import App from './App.vue' import MyComponent from './MyComponent.vue' Vue....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值