Vue组件传参

父传子（props 、 refs）

props

通常，父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件收到后根据参数的不同来渲染不同的内容，或者执行操作。 这个正向传递数据的过程是通过props来实现的。

在组件中，子组件使用props来声明需要从父组件接受的数据。
但是父组件不能向子组件传递数据。

⚠️ 需要注意的是:
在 js中对象和数组是引用类型，指向同一个内存空间，所以 props 是对象和数组时，在子组件内改变是会影响父纽件的。

然后写了一个传递的demo
父组件中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld  :message1="messageToHelloWorld"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  data() {
    return {
      messageToHelloWorld:'我是父组件向下传递的信息'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Linkssss</h2>
    <h3>{{ message1 }}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['message1'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

业务中，还比较常用组件验证:

<script type="text/javascript">
	Vue.component('my-component',{
		props:{
			propA:Number,  //必须是数字类型
			propB:[String,Number],  //必须是字符串或数字类型
			propC:{
				type:Boolean,  //必须是布尔值
				default:true   //未定义，默认值为true
			},
			propD:{
				type:Number,  //数字
				required:true  //必须传
			},
			propE:{
				type:Array,  //数组或者对象，默认值必须是一个函数来返回
				default:function (){
					return [];
				}
			},
			propF:{       //自定义一个验证函数
				validator:function (valut){
					return value > 10 ;
				}
			},
		}
	})
</script>

ref 和 $refs

在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现

ref

ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。

$refs

$refs 是一个对象，持有已注册过 ref 的所有的子组件。

具体演示
1.基础代码
  先来准备案例基础代码，如下

<!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>
</head>
<body>
    <div id="app">
        
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
</body>
</html>
  • 普通DOM方式

我们先通过 getElementById 方法来获取

  • ref方式
<div id="app">
	<input type="button" value="获取h3值" @click="getElement()"/>
	<h3 id="myh3" ref="myh3"></h3>
</div>

通过上面的演示我们发现 在vm实例上有一个 $refs属性，而且该属性就有我们通过ref注册的DOM对象，于是我们可以这样获取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>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取h3的值" @click="getElement()">
        <h3 id="myh3" ref="myh3" >我是一个h3</h3>
        <hr>
        <login ref='mylogin'></login>
    </div>

    <script>

        var login = {
            template: "<h3>我是login子组件</h3>",
            data(){
                return {
                    msg: "ok"
                }
            },
            methods:{
                show(){
                    console.log("show方法执行了...")
                }
            }
        }

        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                getElement(){
                    // 通过 getElementById 方式获取 DOM 对象
                    // console.log(document.getElementById("myh3").innerHTML)
                    // console.log(this.$refs.myh3.innerHTML)

                    console.log(this.$refs.mylogin.msg)
                    this.$refs.mylogin.show()
                }
            },
            components:{
                login
            }
        })
    </script>
</body>
</html>

子传父

父组件

<div id="box">
	父组件
	<child @myevent="handleEvent($event)"></child>
</div>
<script type="text/javascript">
	new Vue({
		el:"$#box",
		methods:{
			handleEvent(){
				console.log("父组件收到钱了")
			}
		}
	})
</script>

子组件

<script type="text/javascript">
	Vue.component('child',{
		template:`
			<div>
				child组件
				<button @click="payMoney()">click</button>
			</div>
		`
		data:(){
			return{
				childname:"子组件的状态"
			}
		},
		methods:{
			payMoney(){
				this.$emit("myevent",this.childname)
			}
		}
	})
</script>

兄弟

posted @ 2020-08-06 11:20  Daeeman  阅读(224)  评论(0)    收藏  举报