Vue学习之组件切换及父子组件小结(八)

一、组件切换:

1、v-if与v-else方式:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>组件</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <a href="" @click.prevent="flag=true">登录</a>
      <a href="" @click.prevent="flag=false">注册</a>

      <login v-if="flag"></login>
      <register v-else="flag"></register>
    </div>

    <script>
      Vue.component("login", {
        template: "<h3>登录组件</h3>"
      });
      Vue.component("register", {
        template: "<h3>注册组件</h3>"
      });
      var vm = new Vue({
        el: "#app",
        data: {
          flag: true
        },
        methods: {},
        filters: {},
        directives: {}
      });
    </script>
  </body>
</html>

2、组件切换之component方式:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>组件</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 1.v-if 和v-else方式 -->
      <!-- <a href="" @click.prevent="flag=true">登录</a>
      <a href="" @click.prevent="flag=false">注册</a>

      <login v-if="flag"></login>
      <register v-else="flag"></register> -->
      <!-- 2.Vue 提供了 component ,来展示对应名称的组件 -->
      <!-- component 是一个占位符,:is 属性,可以用来指定要展示的组件的名称  -->
      <a href="" @click.prevent="comName=‘login‘">登录</a>
      <a href="" @click.prevent="comName=‘register‘">注册</a>
      <component :is="comName"></component>
    </div>

    <script>
      Vue.component("login", {
        template: "<h3>登录组件</h3>"
      });
      Vue.component("register", {
        template: "<h3>注册组件</h3>"
      });
      var vm = new Vue({
        el: "#app",
        data: {
          comName: ""
        },
        methods: {},
        filters: {},
        directives: {}
      });
    </script>
  </body>
</html>

3、组件切换之动画效果:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>组件</title>
    <script src="./lib/vue.js"></script>
    <style>
      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
      }
      .v-enter-active,
      .v-leave-active {
        transition: all 0.8s ease;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <a href="" @click.prevent="comName=‘login‘">登录</a>
      <a href="" @click.prevent="comName=‘register‘">注册</a>
      <!-- 通过 mode 属性,设置组件切换时候的模式 -->
      <transition mode="out-in">
        <component :is="comName"></component>
      </transition>
    </div>

    <script>
      Vue.component("login", {
        template: "<h3>登录组件</h3>"
      });
      Vue.component("register", {
        template: "<h3>注册组件</h3>"
      });
      var vm = new Vue({
        el: "#app",
        data: {
          comName: ""
        },
        methods: {},
        filters: {},
        directives: {}
      });
    </script>
  </body>
</html>

二、父子组件:

1、子组件默认是无法访问父组件的;

2、父组件V-ON传递方法到子组件,子组件需要接收定义到props数组中,才能使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>组件</title>
    <script src="./lib/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <!-- 父组件,可以在引用子组件的时候,通过属性绑定(v-bind)的形式,
        把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,
      供子组件使用 -->
      <com1 v-bind:parentmsg="msg"></com1>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "这是父组件中的数据"
        },
        methods: {},
        components: {
          // 子组件默认是无法访问到父组件中的data上的数据和methods中的方法
          com1: {
            data() {
              // 子组件中的data数据,并不是通过父组件传递过来的,而是子组件啊自身私有的
              // 比如:子组件通过AJAX,请求回来的数据,都可以放到data身上;
              // data 上的数据,都是可读可写的
              return {
                title: "123",
                content: "qqq"
              };
            },
            template: ‘<h1 @click="change">这是子组件----{{ parentmsg }}</h1>‘,
            // 组件中的所有 props 中的数据,都是通过父组件传递给子组件的
            // props 中的数据,都是可读的,无法重新赋值
            props: ["parentmsg"],
            // 把父组件传递过来的 parentmsg 属性,先在 props 数组中定义一下,这样,才能使用这个数据
            directives: {},
            filters: {},
            methods: {
              change() {
                this.parentmsg = "被修改了";
              }
            }
          }
        }
      });
    </script>
  </body>
</html>

3、子组件通过事件调用向父组件传值:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>组件</title>
    <script src="./lib/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <com2 @func123="show"></com2>
    </div>
    <template id="tmp1">
      <div>
        <h1>这是子组件</h1>
        <input
          type="button"
          value="这是子组件中的按钮--点击它,触发:父组件传递过来的func 方法"
          @click="myclick"
        />
      </div>
    </template>

    <script>
      // 定义一个字面量类型的 组件模板对象
      var com2 = {
        // 通过指定一个ID,表示说,要去加载这个指定ID的 template 元素中的内容
        // 当做组件的HTML结构
        template: "#tmp1",
        data() {
          return {
            sonmsg: { name: "小头儿子", age: "6" }
          };
        },
        methods: {
          myclick() {
            // emit 触发、调用、发射
            this.$emit("func123", this.sonmsg);
          }
        }
      };
      var vm = new Vue({
        el: "#app",
        data: {
          datamsgFormSon: null
        },
        methods: {
          show(data) {
            this.datamsgFormSon = data;
            console.log("调用了父组件身上的 show 方法:---" + data);
          }
        },
        components: {
          com2
          // com2:com2
        }
      });
    </script>
  </body>
</html>

三、使用ref获取DOM元素和组件引用:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>组件</title>
    <script src="./lib/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <input type="button" value="获取元素" @click="getElement" ref="mybtn" />
      <h3 id="myh3" ref="myh3">周末也在一直学习</h3>
      <hr />
      <login ref="mylogin"></login>
    </div>

    <script>
      var login = {
        template: "<h1>登录组件</h1>",
        data() {
          return {
            msg: "son msg"
          };
        },
        methods: {
          show() {
            console.log("调用了子组件的方法");
          }
        }
      };
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
          getElement() {
            // console.log(document.getElementById("myh3").innerText);
            // ref --[reference]
            // console.log(this.$refs.myh3.innerText);
            // console.log(this.$refs.mylogin.msg);
            this.$refs.mylogin.show();
          }
        },
        components: {
          login
        }
      });
    </script>
  </body>
</html>

原文地址:https://www.cnblogs.com/21-forever/p/11108578.html

时间: 2024-10-01 08:00:38

Vue学习之组件切换及父子组件小结(八)的相关文章

Vue父子组件及非父子组件如何通信

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的. 父组件: 3.非父子组件通信 如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现

vue2.0父子组件以及非父子组件如何通信

1.父组件 >>> 子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { chi

vue.js学习笔记(4)— 父子组件之间通信的第一种方式 props 和 $emit

我们知道,vue组件中,父组件把数组传递给子组件的话,通常是使用props传递,而vue规定,prop是只能单向下行传递的,那么子组件要怎么才能实现数据的向上传递呢,这里引述一个概念:"父子组件的关系:prop向下传递,事件向上传递",上一篇文章当中,关于数据向上传递用到的事件方法 $emit() 也进行了详细的说明,不懂的童鞋可以翻回去看一下.下面就是今天要说的父子组件相互通信的问题,点击效果依次如下: 代码如下: <!DOCTYPE html> <html>

Vue父子组件和非父子组件传值问题

父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据 <v-select  :ifshop="ifshop"  :clickType="clickType" @close="close" @addShop="sureAddShop"></v-select> 2.子组件接收父组件的数据用props prop

vue的父子组件以及非父子组件之间的通信方式

Vue组件通信 父传子  prop 自定义属性,将父亲的数据传给儿子 1. 在组件标签上使用自定属性 2. 在组件内部通过props来接收自定义属性 3. 子组件接收后既可以在组件里直接使用,不过只能用不能改 <wiz_code_mirror> //父组件 <body>  <div id='app1'>      <!-- 在tp1组件标签上使用 xixi自定义属性 -->    <tp1 :xixi='change'></tp1>

React 父子组件和非父子组件传值

零.this.props 可以接收到 外界的传值 和 此组件标签内部自定义的方法 例: <one vals={message} sendVal={this.handleReverse.bind(this)}></one> 此时在子组件中打印this.props this.props = { vals : '**', sendVal : fn } 由此我们可以进行父子组件之间传值 一.父传子 在子组件标签中用自定义属性进行传递,接收的时候通过this.props进行接收 /* 父组件

父组件如何获取子组件数据,子组件如何获取父组件数据,父子组件如何传值

1.父组件如何主动获取子组件的数据 方案1:$children $children用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是个数组 定义Header.HelloWorld两个组件 <template> <div class="index"> <Header></Header> <HelloWorld :message="message"></HelloWorld>

小程序开发 组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯

在小程序开发中,为了提高代码效率,和代码使用率,我们也用到了组件封装, 今天我介绍下如何在小程序中封装一个头部公用组件 首先,所有父组件(调用页面)的json文件都要引用子组件:index.json { "usingComponents": { "header": "../../component/header/header", } } 一,组件定义(封装) 子组件:header.wxml <view name='header' class

Vue 学习(组件相关)

实现组件三个步骤 组件构造器,Vue.extend(). 这个相当于模板,模板是干什么的呢?理解为 你看到的都是这货渲染出来的,它里面有data,template之类的 注册组件,Vue.component("name",module).这货相当于打标签,上一步创建的,他给命名,第二个参数如果是对象的话,可以省去第一步 挂载组件 注册全局组件 Vue.component("my-component",{ //选项 }) 局部组件 var Child={ templa