《前端》vue学习（四）上-- 组件传值（父向子（`props`）、子向父）+ref获取dom元素和组件引用

最新推荐文章于 2023-07-07 19:25:45 发布

bellediao

最新推荐文章于 2023-07-07 19:25:45 发布

阅读量326

点赞数

分类专栏：前端 VUE.JS 文章标签：组件组件传值 ref

本文链接：https://blog.csdn.net/bellediao/article/details/106750081

版权

前端同时被 2 个专栏收录

257 篇文章 1 订阅

订阅专栏

VUE.JS

62 篇文章 0 订阅

订阅专栏

小球动画复习：

<!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>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
  <div id="app">
    <cmt-box @func="loadComments"></cmt-box>
    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人： {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>
  </div>
  <template id="tmpl">
    <div>
      <div class="form-group">
        <label>评论人：</label>
        <input type="text" class="form-control" v-model="user">
      </div>
      <div class="form-group">
        <label>评论内容：</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>
      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>
    </div>
  </template>
  <script>
    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 发表评论的方法
          // 分析：发表评论的业务逻辑
          // 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          // 2. 先组织出一个最新的评论数据对象
          // 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
          //  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify 
          //  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
          //  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
          //  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()
          var comment = { id: Date.now(), user: this.user, content: this.content }
          // 从 localStorage 中获取所有的评论
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 评论数据
          localStorage.setItem('cmts', JSON.stringify(list))
          this.user = this.content = ''
          // this.loadComments() // ?????
          this.$emit('func')
        }
      }
    }
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我材必有用' },
          { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
          { id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
        ]
      },
      beforeCreate(){ // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好
      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 从本地的 localStorage 中，加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>
</html>

  <style>
    .ball {
      width: 15px;
      height: 15px;
      background-color: red;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="加入购物车" @click="flag=!flag">
      
    <!--用transition包裹 小球，并定义了三个事件。 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        // 注意：el就是小球
        beforeEnter(el){
          // 小球初始位置
          el.style.transform = 'translate(0, 0)'
        },
        enter(el, done){
          el.offsetWidth
          el.style.transform = 'translate(150px, 450px)'  // 小球终点位置

          el.style.transition = 'all 1s ease'    //过渡属性
          done()   //调用afterEnter()
        },
        afterEnter(el){
          // 这句话， 第一个功能，是控制小球的显示与隐藏
          // 第二个功能： 直接跳过后半场动画，让 flag 标识符 直接变为 false
          // 当第二次再点击 按钮的时候， flag  false  ->    true
          this.flag = !this.flag   //小球隐藏
          // el.style.opacity = 0.5  //这个不好使，只能用一次，不会有下一次

          // Vue 把一个完整的动画，使用钩子函数，拆分为了两部分：
          // 我们使用 flag 标识符，来表示动画的切换；
          // 刚以开始，flag = false  ->   true   ->   false
        }
      }
    });
  </script>
</body>

组件回顾：

定义组件的时候，如果要定义全局的组件， Vue.component('组件的名称', {})。

私有组件是使用components属性。

<body>
  <div id="app">
    <!-- <mylogin></mylogin> -->
    <login></login>
  </div>
  <script>
    // 定义组件的时候，如果要定义全局的组件， Vue.component('组件的名称', {})
    // 通过 对象 字面量的形式， 定义了一个 组件模板对象
    var login = {
      template: '<h1>1234</h1>'
    }
    /*  通过  Vue.component 把 组件模板对象，注册为一个全局的Vue 组件，
     同时，为这个组件起了一个名称，可以让我们通过 标签形式，在页面中直接引入这个组件*/
    // Vue.component('mylogin', login)
    // 也可以像下面login那么简写
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        // '组件的名称': 组件的模板对象
        // 'mylogin': login
        login
      }
    });
  </script>
</body>

一、组件

1.1 父组件向子组件传值

<body>
  <div id="app">
    <com1></com1>
    <p>{{msg}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '注意：这是父组件中的数据+我想加入子组件的内容<com1></com1>'
      },
      methods: {},
      components: {
        com1: {
          template: '<h1>这是一个私有组件</1>'
        }
      }
    });
  </script>
</body>

出现问题：没有正常引用到。

正确做法：

有以下两个步骤：1 父组件通过属性将值传递给子组；2 组件内部通过props接收传递过来的值件。

（换种步骤解释：

1 在html的子组件标签中，使用bind绑定一个方法并赋予一个父组件的值；2 在子组件中声明 props属性，里面是绑定的父组件名称，并在template中使用 {{绑定父组件值的方法名}} ）

1. 使用`v-bind`或简化指令，将父组件数据传递到子组件中：
<div id="app">
<son :finfo="msg"></son>
</div>

2. 组件实例定义方式，注意：一定要使用`props`属性来定义父组件传递过来的数据。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的消息'
},
components: {
son: {

// 同样也可以在 vm 实例中这样使用
template: '<h1>这是子组件 --- {{finfo}}</h1>',

// 声明 props，里面是绑定的父组件名称
props: ['finfo']
}
}
});
</script>

<body>
  <div id="app">
    <!-- 父组件，可以在引用子组件的时候， 
      通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，
      传递到子组件内部，供子组件使用 -->
    <com1 v-bind:parentmsg="msg"></com1>
  </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123 啊-父组件中的数据'
      },
      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: {},//props是数组，像是directives、filters、components是对象
          filters: {},
          components: {},
          methods: {
            change() {
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  </script>
</body>

props属性值类型：

字符串String、数值Number、布尔值Boolean、数组Array、对象Object

props传递数据原则：单向数据流。

只允许父组件向子组件传递数据，不允许子组件直接操作props中的数据

1.2 子组件向父组件传值

（父组件把方法传递给子组件，并向父组件传参）

1. 原理：父组件将方法的引用传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去。
2. 父组件将方法的引用传递给子组件，其中，`getMsg`是父组件中`methods`中定义的方法名称，`func`是子组件调用传递过来方法时候的方法名称。

<son @func="getMsg"></son>

3. 子组件内部通过$emit()的方式，来调用父组件中的方法，同时把数据传递给父组件使用。

`this.$emit('方法名', 要传递的数据)`

总结：

<div id="app">

<son @func="getMsg"></son>


<script type="x-template" id="son">
<div>
<input type="button" value="向父组件传值" @click="sendMsg" />
</div>
</script>
</div>

<script>
// 子组件的定义方式
Vue.component('son', {
template: '#son', // 组件模板Id
methods: {
sendMsg() { // 按钮的点击事件
this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
}
}
});

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
alert(val);
}
}
});
</script>

<body>
  <div id="app">
    <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
    
    <!-- com2是一个子组件，show是父组件的一个方法，我们现在想实现的是在子组件中调用父组件的这个show方法，这里给了他一个 v-on事件绑定机制，命名为func
    怎么能够调用到这个func？--  在组件中建立一个触发按钮，绑定click事件，这个click事件在父组件中定义，且进行触发：this.$emit('func', 参数1，参数2...)-->
    <com2 @func="show"></com2>
  </div>
  <template id="tmpl">
    <div>
      <h1>这是 子组件</h1>
      <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
    </div>
  </template>
  <script>
    // 定义了一个字面量类型的 组件模板对象
    var com2 = {
      template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
      data() {
        return {
          sonmsg: { name: '小头儿子', age: 6 }
        }
      },
      methods: {
        myclick() {
          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
          //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }
    }
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          // console.log('调用了父组件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data
        }
      },

      components: {
        com2
        // com2: com2
      }
    });
  </script>
</body>

1.3 非父子组件之间传值

单独的时间中心管理组件间的通信

var hub = new Vue();// 提供事件中心

监听事件与销毁事件

// 监听事件（创建一个监听事件）
hub.$on('tom-event', (val) => {
    this.num += val;
});
//销毁事件
hub.$off('tom-event');

触发事件

// 触发兄弟组件的事件
hub.$emit('tom-event', 1);

例子：

<div id="app">
    <div>父组件</div>
    <div>
        <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
</div>
<script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    // 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
        data: function(){
            return {
                num: 0
            }
        },
        template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
        methods: {
            handle: function(){
                hub.$emit('jerry-event', 2);
            }
        },
        mounted: function() {
            // 监听事件
            hub.$on('tom-event', (val) => {
                this.num += val;
            });
        }
    });
    Vue.component('test-jerry', {
        data: function(){
            return {
                num: 0
            }
        },
        template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
        methods: {
            handle: function(){
                // 触发兄弟组件的事件
                hub.$emit('tom-event', 1);
            }
        },
        mounted: function() {
            // 监听事件
            hub.$on('jerry-event', (val) => {
                this.num += val;
            });
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            handle: function(){
                hub.$off('tom-event');
                hub.$off('jerry-event');
            }
        }
    });
</script>

1.4 组件插槽

父组件向子组件传递内容（模板的内容，区别去上面的数据交互）

父组件标签之间的内容会放置到子组件插槽中

基本用法

当组件渲染的时候，<slot></slot>将会被替换为“hello Vue”。插槽内可以包含任何模板代码，包括 HTML：

插槽位置

Vue.component('text-show',{
        template:`
            <div>
                <strong>莫逸风</strong>
                <slot></slot>
            </div>
        `
    });

插槽内容

<text-show>hello Vue</text-show>

例子：

<div id="app">
    <text-show>
        <strong>HelloVue</strong>
    </text-show>
</div>
<script>

    Vue.component('text-show',{
        template:`
            <div>
                <strong>莫逸风</strong>
                <slot></slot>
            </div>
        `
    });

    var vue = new Vue({
        el:"#app",
        data:{

        },
    })
</script>

编译作用域

hello访问的是app实例中的数据，而不是text-show中的数据

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

<div id="app">
    <text-show>
        <strong>{{hello}}</strong>
    </text-show>
</div>

后备内容

在子组件中solt标签中添加默认内容

<slot>默认</slot>

插槽无内筒显示默认内容

<text-show></text-show>    <!--显示“默认”-->

插槽有内容覆盖默认内容

<text-show>bella</text-show>    <!--显示“bella”-->

二、ref-来获取DOM元素或给子组件注册引用信息

ref 被用来获取DOM元素或给子组件注册引用信息（子组件中的data和去调用子组件中的方法）。

引用信息会根据父组件的 $refs 对象进行注册。

如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。

2.1 使用 `this.$refs` 来获取元素和组件.

<body>
    <div id="app">
        <com1></com1>
    </div>
    <template id="templ1">
        <div>
            <div ref="testDom">11111</div>
            <button @click="getTest">获取test节点</button>
    </div>
    </template>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '注意：这是父组件中的数据'
            },
            methods: {},
            components: {
                com1: {
                    template: '#templ1',
                    methods: {
                        getTest() {
                            //这里
                            console.log(this.$refs.testDom)
                        }
                    }
                }
            }
        });
    </script>
</body>

2.2 使用 `this.$refs` 来获取组件的数据和方法.

下面案例增加了ref获取组件的数据和方法，如下：

<body>
    <div id="app">
        <!-- 组件 -->
        <com1></com1>
        <button @click=getMylogin>获取组件的数据和方法</button>
        <login ref="mylogin"></login>
    </div>
    <template id="templ1">
        <div>
            <div ref="testDom">我想实现获取这个div的dom元素</div>
            <button @click="getTest">获取dom元素节点</button>
    </div>
    </template>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '注意：这是父组件中的数据'
            },
            methods: {
                getMylogin: function() {
                    console.log("组件mylogin的数据:" + this.$refs.mylogin.msg);
                    console.log("调用一下组件mylogin的show方法：");

                    this.$refs.mylogin.show()
                }
            },
            components: {
                com1: {
                    template: '#templ1',
                    methods: {
                        getTest() {
                            //这里
                            console.log(this.$refs.testDom)
                        }
                    }
                },
                login: {
                    template: '<h1>登录组件</h1>',
                    data() {
                        return {
                            msg: 'son msg'
                        }
                    },
                    methods: {
                        show() {
                            console.log('show方法：调用了子组件的方法')
                        }
                    }
                }
            }
        });
    </script>
</body>

效果：

===================下面先不看，或许重复，或许不重复========

2.2 获取子组件中的data

//子组件
<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world"
    }
  }
}
</script>

//父组件
<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      console.log(this.$refs.hello.msg)
    }
  }
};
</script>

5.3 调用子组件中的方法

//子组件
<template>
  <div>
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用到了")
    }
  }
}
</script>

//父组件
<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open();
    }
  }
};
</script>

子组件调用父组件方法

//子组件
<template>
  <div>
</div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用了");
      //  调用父组件方法
      this.$emit("refreshData");
    }
  }
}
</script>

//父组件
<template>
  <div id="app">
    <HelloWorld ref="hello" @refreshData="getData"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open()
    },
    getData() {
      console.log('111111')
    }
  }
};
</script>