Vue(二)

最新推荐文章于 2023-08-13 09:28:11 发布

海到天边浪作涯

最新推荐文章于 2023-08-13 09:28:11 发布

阅读量82

点赞数

分类专栏： vue.js 乐优商城

本文链接：https://blog.csdn.net/weixin_42779560/article/details/89810682

版权

乐优商城同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue.js

2 篇文章 0 订阅

订阅专栏

父向子的通信

1、自定义一个局部组件；
2、在父亲方注册该组件，并在body对应的组件中使用该组件，如果存在驼峰命名，可以使用-首字母变成小写字母，并对父子间的属性进行绑定；属性名称是自定义的，属性值是父亲方的属性名称；

3、在儿子方通过props对属性进行二次绑定；

  <body>
      <div id="app">
          <!--自定义组件,:title是儿子方的属性,msg是父亲方的属性-->
          <introduce :title="msg"></introduce>
          <for-component :items="lessons"></for-component>
      </div>
  </body>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script type="application/javascript">
      //定义一个局部组件
      const introduce = {
         template:"<h1>{{title}}</h1>",
          props:['title']
      };
      const forComponent = {
          template:"<ul><li v-for='(item,i) in items' >{{item}}</li></ul>",
          props:{
              items:{
                  type:Array,
                  default:['java']
              }
          }
      };
      const app = new Vue({
          el:"#app",
          data:{
              msg:"大家好,我是渣渣辉!",
              lessons:['java','php','python','python+AI']
          },
          components:{
              introduce,forComponent
          }
      });
  </script>

子向父的通信

1、在父亲方定义一个属性，并定义好方法；
2、在组件上自定义属性，并和父亲方法进行绑定；

3、在儿子方定义方法，并产生对组件属性的调用，使用this.$emit(‘属性名称’,参数…);

  <div id="app">
      <!--自定义属性,调用父亲方的什么方法，儿子方的什么属性绑定父亲方的属性设置-->
      <counter :num="count" @acer="add" @decr="reduce"></counter>
  
  </div>
  </body>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
      const counter = {
          template:`
              <div>
              <button @click='handlerAdd'>+</button>
              <button @click='handlerReduce'>-</button>
              <h1>num:{{num}}</h1>
              </div>
          `,
          props:['num'],//儿子方的属性
          methods:{
              handlerAdd(){
                  this.$emit('acer');
              },
              handlerReduce(){
                  this.$emit('decr');//通过$emit动态的获取自定义属性，并调用父亲方的知道方法
              }
          }
      };
      const app = new Vue({
          el:"#app",
          data:{
              count:0
          },
          components:{
              counter
          },
          methods:{
              add(){//先在父亲方定义加减方法
                  this.count++;
              },
              reduce(){
                  this.count--;
              }
          }
      });
  </script>

watch的对象监控

定义一组对象

  person:{
           name:"谢兰",
           age:22
              }

watch监控

  watch:{
              person:{
                  deep:true,//开启深度监控
                  handler(val){//方法名称必须是Handler
                      console.log(val.age);
                  }
              }

局部组件与全局组件

//vue的全局组件，使用vue的静态方法component对全局组件进行注册并初始化
    Vue.component("counter",{
        template:"<button v-on:click='count++'>你点了我{{count}}次</button>",
        data(){
            return{
                count:0
            }
        }
    });
    //局部注册组件,先声明一个组件，并在vue实例中进行注册，components组件
    const counter = {
        template:"<button v-on:click='count++'>你点了我{{count}}次</button>",
        data(){
            return{
                count:0
            }
        }
    };