Vue入门（一）组件传值，搭建简单的Vue项目

最新推荐文章于 2023-10-29 21:15:36 发布

如意小队

最新推荐文章于 2023-10-29 21:15:36 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/ruyi_squad/article/details/98659973

版权

父组件向子组件传值
   1 传值
   2 传变量
举例
<body>
       <h1>父组件向子组件传值</h1>
       <p>send代表发送</p>
       <div id="app">
           <h2>传值</h2>
           <child1 send="red"></child1>
           <h2>传变量</h2>
           <child1 :send="color"></child1>
       </div>
       <script type="text/javascript" src="js/vue.min.js"></script>
       <script>
           //生子
           let child1 = {
               data() {
                   return {
                       str1: "小样酸扣糖"
                   }
               },
               props: {
                   //接收父组件传的值，变量名为send
                   send: {
                       type: String,
                       default: 'yellow' //默认值
                   }
               },
               //：class变量
               template: '<div :class="send">[第一个子组件]{{str1}}</div>'
           }
           new Vue({
               el: "#app",
               data: {
                   color: 'blue'
               },
               components: {
                   child1
               }
           })
       </script>
   </body>

子组件向父组件传值

   1、子组件触发@click事件
   2、向父组件传值，调用的方法中：this.$emit('自定义事件名称'，传值)；
   3、父组件接收传值 <child @end="play">
           play(x){x就是传过来的值}

<body>
       <h1>子组件向父组件传值</h1>
       <p>send代表发送</p>
       <div id="app">
           <div>
               父组件的数据{{msg}}
           </div>
           <child1 @end="play"></child1>
       </div>
       <script type="text/javascript" src="js/vue.min.js"></script>
       <script>
           //生子
           let child1 = {
               data() {
                   return {
                       str1: "小样酸扣糖"
                   }
               },
               methods: {
                   send() {
                       //定义发送的数据名称和他的值，父组件用@数据名称接收，然后调用方法，实现所接收数据的操作
                       this.$emit('end', this.str1);
                   }
               },
               //：class变量
               template: '<div @click="send">[第一个子组件]{{str1}}</div>'
           }
           new Vue({
               el: "#app",
               data: {
                   msg: 'hello,,'
               },
               methods: {
                   play(x) {
                       //x为接收的值
                       this.msg += x;
                   }
               },
               components: {
                   child1
               }
           })
       </script>
   </body>

子组件之间传值（了解）

子向公共父，公共父再向子

<body>
       <h1>子组件向子组件传值</h1>
       <p>send代表发送</p>
       <div id="app">
           <child1></child1>
           <child2></child2>
       </div>
       <script type="text/javascript" src="js/vue.min.js"></script>
       <script>
           let bus = new Vue(); //公共父级
           //生子
           let child1 = {
               data() {
                   return {
                       str1: "张三"
                   }
               },
               methods: {
                   send() {
                       alert("第一个子组件发送数据");
                       bus.$emit("msg", "hello,我是" + this.str1);
                   }
               },
               template: '<div @click="send">[第一个子组件]{{str1}}</div>'
           }
           let child2 = {
               data() {
                   return {
                       str2: "李四"
                   }
               },

               template: '<div>[第二个子组件]{{str2}}</div>',
               created() {
                   /*let that = this;
                   bus.$on("msg",function(x){
                   alert(that.str2+"接收到的数据:"+x);)
               }*/
                   //使用es6的箭头函数
                   bus.$on("msg", (x) => {
                       alert(this.str2 + "接收到的数据:" + x);
                   })
               }
           }
           new Vue({
               el: "#app",
               methods: {
                   play(x) {
                       //x为接收的值
                       this.msg += x;
                   }
               },
               components: {
                   //挂子
                   child1,
                   child2
               }
           })
       </script>
   </body>

vue路由
   1、引入vue-router.js库
   2、创建子组件
   3、将路由加载到vue中
   4、实例化路由 let router = new VueRouter({
   5、配置路由规范
       routes:[{
           path:'/login',
           component:login//component没有s
           }]
   })
   6、挂路由
       new Vue{ router }
   7、使用路由
   <router-link to="">相当于<a href="">
   <router-view>用于显示

<body>
       <div id="app">
           <router-link to="/menu1">菜单1</router-link>
           <router-link to="/menu2">菜单2</router-link>
           <router-view></router-view>
       </div>
       <script type="text/javascript" src="js/vue.min.js"></script>
       
       <script type="text/javascript" src="js/vue-router.js"></script>

       <script>
           //2、子组件
           let menu1 = {
               template: "<div>我是菜单1</div>"
           }
           let menu2 = {
               template: "<div>我是菜单2</div>"
           }
           //实例化路由
           let router = new VueRouter({
               routes: [{
                       path: "/menu1",
                       component: menu1
                   },
                   {
                       path: "/menu2",
                       component: menu2
                   }
               ]
           })
           //实例化Vue
           //挂路由
           new Vue({
               el: "#app",
               router
           })
       </script>
   </body>

路由范式(简单传值)
   1、query对象
       http://localhost:8080/login?username=zhangsan&password=123456
       let menu1 = {
               template: "<div>我是菜单1{{this.$route.query.username}}</div>"
           }
   2、params对象
       http://localhost:8080/login/username/zhangsan

       routes: [{
                       path: "/menu1/:username",
                       component: menu1
                   },
                   {
                       path: "/menu2/:username",
                       component: menu2
                   }
               ]
       let menu2 = {
               template: "<div>我是菜单2{{this.$route.params.username}}</div>"
           }

Vue 项目搭建

   之前配过两个路径,其中一个指定了全局安装路径，另一个是缓存吧！
   npm config set prefix "E:\cry\huanjing\nodejs\node_global"
   npm config set cache "E:\cry\huanjing\nodejs\node_cache"
   全局安装会在E:\cry\huanjing\nodejs\node_global路径下
   一定要配好环境变量，修改了路径，也需要重新检查一下path如果没有就加上

   1、安装node
   2、npm install vue
       npm install vue-router
       npm install vue-cli
   3、有一个记录的文本(package.json)，npm install
   4、npm init 会创建package.json文件，回车再回车
   5、npm install jquery 最新版本
       npm install jquery@1.12.4 指定版本
   6、npm install vue --save 就会记录
   7、npm install 会读取package.json文件，就会安装所有记录的组件

   8、架设vue项目
       8.1安装vue脚手架vue-cli npm install -g vue-cli
       8.2vue init webpack mydemo 回车
           名称、描述、作者、vue创建用什么编译（第一个）、
           vue-router、语法检查（no非常严格）、单元测试、
           另一个测试、npm选项回车。下载时间会有点儿长。
       8.3 进入mydemo文件夹 npm run dev 启动，访问localhost:8080

如意小队

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门（一）组件传值，搭建简单的Vue项目

父组件向子组件传值 1 传值 2 传变量举例<body> <h1>父组件向子组件传值</h1> <p>send代表发送</p> <div id="app"> <h2>传值</h2> &lt...
复制链接

扫一扫