vue组件，数据监听、父调子、子调父、keep-alive、父给传子值

迷路的老虎LH

已于 2023-06-14 14:55:08 修改

阅读量87

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-06-10 14:16:09 首次发布

本文链接：https://blog.csdn.net/hello_qaz123/article/details/131141016

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、组件使用

1.1 子组件

Vue.component('new-component', {
    props: {
		'data1':{
			default:[]
		},
	},
    emits: ['newClick'],
    template: `
           <div @click="ok" >
           
           </div>
        `,
    data () {
        return {
            testNo: false
        }
    },
    watch:{
		data1:{
			immediate: true,
			deep: true,
			handler(newVal, oldVal) {
			 
			}
			
		}
	},
    methods: {

        ok () {
            this.$emit('newClick', 1);
        },
        newClickItem(){
        },
         
    }
      
})

1.2 父组件

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>Test</title>
    <script src='js/vue.global.prod.js'></script>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div id="app" class="bg">
         <component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
        </component>
       <!--
       <new-component ref="newcomponent" @newClick="newClick" :data1="data1" >
       </new-component>
       -->
    </div>
    <script>
        const App = {

            data() {
                return {
                   data1:['1','2','3'],
                   tabComponent:'new-component'
                }         
            },
            mounted() {
            
            },
            methods: {
               newClick(inStr){
               
               },
               newClick2(){
                  this.$refs.newcomponent.newClickItem();
               },
            }
			     
        };

        Vue.createApp(App).mount('#app')

    </script>
</body>
</html>

注：

1、父组件向子组件传值

data1是传的数据

 父：
 <component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
 </component>
子：
props: {
		'data1':{
			default:[]
		},
	},

2、父调用子组件方法

父需要定义ref，子：newClickItem子组件的方法


  <component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
 </component>
 
this.$refs.newcomponent.newClickItem();

3、子调用父组件方法

子：需要定义 emits，父：@newClick

父：
 <component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
 </component>

子：
 emits: ['newClick'],
 调用：this.$emit('newClick', 1);

4、监听父组件传值

子 immediate 立即执行，deep深度监听

 watch:{
		data1:{
			immediate: true,
			deep: true,
			handler(newVal, oldVal) {
			 
			}
			
		}
	},

5、更新组件

:is 的值

<component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
 </component>

6、其他

父可定义keep-alive :include 进行缓存，会触发子activated(){}

<keep-alive :include="['new-component']">
      <component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
      </component>
</keep-alive>