vue知识点1-父子组件传值插槽 wath vuex

2024-04-30 04:41:56

props $emit 插槽 wath vuex

父组件

<template>

<div>

<children :num="num" @incre="increase" @decrea="decrease"></children>

<div>{{num}}</div>

</div>

</template>

<script>

import children from "./children";

export default {

data() {

return {

num: 30

};

},

components: {

children

},

methods: {

increase() {

this.num++;

},

decrease() {

this.num--;

}

}

};

</script>

<style lang="scss" scoped>

</style>

子组件

<template>

<div>

<button @click="increase">+</button>

<button @click="decrease">-</button>

<div class="numb">{{num}}</div>

</div>

</template>

<script>

export default {

// num是父组件中绑定的num

props: ["num"],

data() {

return {

num: 19

};

},

methods: {

increase() {

// this.numb++

this.$emit("incre");

// incre是父组件里的事件名

},

decrease() {

// this.numb--

this.$emit("decrea");

}

}

};

</script>

<style lang="scss" scoped>

</style>

例二 wath（数据传递需要时间，在created中拿不到数据用wath监听数据变化）

父组件

<floorComponent :floorData="floor1" :floorTitle="floorName.floor1"></floorComponent>

<floorComponent :floorData="floor2" :floorTitle="floorName.floor2"></floorComponent>

<floorComponent :floorData="floor3" :floorTitle="floorName.floor3"></floorComponent>

import floorComponent from '@/components/component/floorComponent'

components:{

floorComponent ,

},

子组件

export default {

props:['floorData','floorTitle'],// floorTitle//楼层名称

data() {

return {

floorData0:{},

floorData1:{},

floorData2:{}

}

},

created(){

//这里写得不到数据，应为数据是延迟返回的

},

watch:{

floorData:function(val){

// console.log(this.floorData)

this.floorData0=this.floorData[0]

this.floorData1=this.floorData[1]

this.floorData2=this.floorData[2]

}

}

}

插槽

在子组件声明一个模板

<template>

<div class="border-container">

<slot></slot>

</div>

</template>

<script>

export default {};

</script>

<style lang="scss">

.border-container {

border: 20px solid hotpink;

border-radius: 50%;

overflow: hidden;

width: 100px;

height: 100px;

margin: auto;

}

</style>

父组件

引入组件,注册,在组件标签中写内容

<template>

<div>

<borderCom>牛哄哄</borderCom>

<borderCom>

<p>我一个p标签</p>

</borderCom>

<borderCom>

<img src="./assets/06.png" alt>

</borderCom>

</div>

</template>

<script>

// 导入

import borderCom from "./components/borderCom";

export default {

components: {

borderCom

}

};

</script>

<style lang="scss">

</style>

refs

父组件

<h2 ref="h">标题</h2>

mounted() { //要在数据显示出来后调用

console.log(this.$refs.h);

this.$refs.h.innerHTML = "我是一个标题呀";

}

};

refs获取标记的元素，父组件中获取dom元素，子组件中获取实例,不过vue不推荐操作dom元素。

vuex

第一种用法

第二种用法把count数据(当做一个计算属性)通过展开运算符...和maostate函数映射当前组件的属性和方法

使用mutation 来操作全局数据

const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 变更状态state.count++}}
})

action第一种触发

Action 通过 store.dispatch 方法触发：

第二种

ac

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。不会修改store中的数据

是一个映射关系

vue知识点1-父子组件传值插槽 wath vuex相关推荐

vue父子组件传值简单了解vuex
一.vue的父子组件之间是如何传值的? 首先呢,需要说说的是,vue既然有双向绑定,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果数组都是双向绑定的话 ...
vue中的父子组件传值详解
父组件与子组件传值 //父组件通过标签上面定义传值 <template> //使用子组件,在里面传输数据<main :obj="data"></mai ...
Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
Vue之非父子组件通信
Vue之非父子组件通信非父子组件传值方法: 1:在model中新建一个js文件引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
vue父子组件传值的一些坑（深浅拷贝）
本文章转载:https://www.yht7.com/news/116487 1.问题描述父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使 ...
Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
Vue.js组件-组件通信-非父子组件传值以及其他通信方式
非父子组件传值非父子组件指的是兄弟组件或完全无关的两个组件兄弟组件兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C.示例如图: Ev ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...

最新文章

热门文章