赞
踩
只能监听自定义事件
直接在需要定时器的方法或者生命周期函数中声明并销毁,代码如下
- export default{
- methods:{
- fun1(){
- const timer = setInterval(()=>{
- //需要做的事情
- console.log(11111);
- },1000);
- this.$once('hook:beforeDestroy',()=>{
- clearInterval(timer);
- timer = null;
- })
- }
- }
- }
1.$refs的使用场景
父组件调用子组件的方法,可以传递数据。
父组件:
- <div id="app">
- <child-a ref="child"></child-a>
- <button @click="getMyEvent">点击父组件</button>
- <div>
-
- <script>
- import ChildA from './child.vue'
-
- export default{
- components:{
- ChildA
- },
- data(){
- return {
- msg:'我是父组件的数据'
- }
- },
- methods:{
- getMyEvent(){
- //调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
- this.$refs.child.emitEvent(this.msg)
- }
- }
- }
- </script>
子组件:
- <template>
- <button>点击我</button>
- </template>
- <script>
- export default{
- methods:{
- emitEvent(msg){
- console.log('接收的数据------'+msg)
- }
- }
- }
- </script>
2.$emit的使用
子组件调用父组件的方法并传递数据。
子组件:
- <template>
- <button @click="emitEvent">点击我</button>
- </template>
- <script>
- export default{
- data(){
- return{
- msg:'我是子组件的数据'
- }
- },
- methods:{
- emitEvent(){
- //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
- this.$emit('my-event',this.msg)
- }
- }
- }
- </script>
父组件:
- <template>
- <div id="app">
- <child-a @my-event="getMyEvent"></child-a>
- //父组件通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值。
- </div>
- </template>
- <script>
- import childA from './child.vue';
- export default {
- components:{
- childA
- },
- methods:{
- getMyEvent(msg){
- console.log('接收数据---'+msg);
- //接收数据,我是子组件的数据
- }
- }
- }
- </script>
3.$on的使用场景
兄弟组件之间相互传递数据。
首先创建一个Vue的空白实例(兄弟组件的桥梁)
子组件A:发送放使用$emit自定义事件把数据带过去。
- <template>
- <div>
- <span>A组件-{{msg}}</span>
- <input type="button" value="把A组件数据传递给B" @click="send">
- </div>
- </template>
- <script>
- export default{
- data(){
- return{
- msg:{
- a:'111',
- b:'222'
- }
- }
- },
- methods:{
- send(){
- this.$emit('aevent',this.msg)
- }
- }
- }
- </script>
子组件B:接收方通过$on监听自定义事件的callback接收数据
- <template>
- <div>
- <span>B组件,A传的数据为--{{msg}}</span>
- </div>
- </template>
- <script>
- export default {
- data(){
- return{
- msg:''
- }
- },
- mounted(){
- this.$on('aevent',(val)=>{//监听事件aevent,回调函数要使用箭头函数。
- console.log(val);//打印结果;我是a组件的数据。
- })
- }
- }
- </script>
父组件:
- <template>
- <div>
- <childa></childa>
- <br/>
- <childb></childb>
- </div>
- </template>
- <script>
- import childa from './childa.vue';
- import childb from './childb.vue';
- export default{
- componets:{
- childa,
- childb
- },
- data(){
- return{
- msg:''
- }
- }
- }
- </script>
4.$once的使用场景
参数:
- {string} event
- {Function} callback
用法:
监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。
$once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除。
$once有两个参数,第一个参数为字符串类型,用来指定绑定的事件名称,第二个参数设置事件的
- <template>
- <div>
- <button @click="$emit('jpf')">按钮</button>
- </div>
- </template>
-
- <script>
- export default {
- mounted() {
- this.$once('jpf', () => {
- console.log('once');
- });
- }
- }
- </script>
$once可以多次为同一个事件绑定多个回调,触发时,回调函数按照绑定顺序依次执行。
- <template>
- <div>
- <button @click="$emit('jpf')">按钮</button>
- </div>
- </template>
-
- <script>
- export default {
- mounted() {
- this.$once('jpf', () => {
- console.log('1');
- });
- this.$once('jpf', () => {
- console.log('2');
- });
- }
- }
- </script>
- // 修饰符
- <a-button @click.once="test()" type="primary">保存</a-button>
$once, $off上面 里说的监听器 指的是 $on的监听器
5.$off的使用场景
参数:
- {string | Array<string>} event (只在 2.2.2+ 支持数组)
- {Function} [callback]
用法:
移除自定义事件监听器。
- 如果没有提供参数,则移除所有的事件监听器;
- 如果只提供了事件,则移除该事件所有的监听器;
- 如果同时提供了事件与回调,则只移除这个回调的监听器。
- // 选中返回数据
- handleChange(value) {
- this.$emit('change', value)
- this.$emit('Ok', value)
- this.$off('Ok', ()=> {
- console.log(1111111111111);
- })
- this.$off('change)
- // 不能有回调函数,第一个无效,因为 只移除这个回调的监听器
- },
来源:https://www.jianshu.com/p/33ac17271b43
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。