父子组件的传值

父子组件的传值

(一) 父组件给子组件传值

1.父组件传递

  • 父组件在调用子组件的位置,添加一个自定义属性, 属性的值就是父组件传入子组件的值
  • 如果属性值是一个变量,或布尔类型的数据,或数值类型的数据, 该自定义属性需要使用绑定属性v-bind

2.子组件接收

  • 在子组件定义的位置,添加一个props选项
  • 选项的值默认是一个数组,数组的元素就是:

父组件在调用子组件的位置定义的属性名

  • 这样就可以在子组件中通过自定义属性名访问父组件传入的数据了

3.props选项内接收到的父组件传过来的数据,可以进行一些自定义配置

  • 首先将props的值改为对象,对象的key:自定义的属性名,对象的value:对象
  • 这个对象就是当前接收到数据的配置对象
  • 配置选项有:
  • type:数据类型
  • default:默认数据
  • required:当前数据为必传数据

(二) 子组件给父组件传值

  1. 准备好要送的数据
  2. 在父组件调用子组件的位置,给子组件添加自定义事件(自定义事件名不能使用现有名称)
  3. 在父组件实例内部定义事件处理方法,方法的的参数会接收子组件的数据
  4. 在子组件的实例内部,使用this.$emit(自定义事件名, 数据)的方式触发自定义事件,并发送数据)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      div{border:solid 1px black;padding: 10px;margin: 10px;}
    </style>
	</head>
	<body>

    <div id="app">
      <h1>{{title}}</h1>
      <p>我是:{{name}}</p>
      <c></c>
    </div>
    
	</body>
  <script src="vuue.js" type="text/javascript" charset="utf-8"></script>
  
  <template id="kx">
    <div>
      <h2>我是:{{name}}</h2>
      <p>我有什么:{{a}}</p>
      <child1></child1>
      <child2></child2>
    </div>
  </template>
  <template id="yx">
    <div>
      <h3>我是:{{name}}</h3>
      <p>我有什么:{{a}}</p>
    </div>
  </template>
  
  <template id="yz">
    <div>
      <h3>我是:{{name}}</h3>
      <p>我有什么:{{a}}</p>
      <p>我拿到了儿子的:{{b}}</p>
      <child :abc="a" v-on:myeve="getData"></child>
    </div>
  </template>
  
  <template id="ql">
    <div>
      <h4>我是:{{name}}</h4>
      <p>我有什么:{{a}}</p>
      <p>收到了父级的:{{abc}}</p>
    </div>
  </template>
  <script type="text/javascript">  
    let temp1 = {
      template:"#ql",
      data(){
        return {
          name:"乾隆",
          a:"手机"
        }
      },
      props:["abc"],
      created(){
        this.$emit("myeve", this.a)
      }
    }
    let temp2 = {
      template:"#yx",
      data(){
        return {
          name:"胤祥",
          a:"大众"
        }
      }
    }
    let temp3 = {
      template:"#yz",
      data(){
        return {
          name:"雍正",
          a:"黄浦区的房子",
          b:""
        }
      },
      components:{
        child: temp1
      },
      methods:{
        getData(v){
          console.log(v);
          this.b = v;
        }
      }
    }
    let temp4 = {
      template:"#kx",
      data(){
        return {
          name:"康熙",
          a:"翡翠白菜"
        }
      },
      components:{
        child1: temp2,
        child2: temp3
      }
    }
    
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello component",
        name:"努尔哈赤",
        a:"江山"
      },
      components:{
        c:temp4
      }
    })

    // 努尔哈赤
    //   康熙
    //     雍正
    //       乾隆
    //     胤祥
      
  </script>
</html>

你可能感兴趣的:(组件嵌套,vue基础,vue.js,javascript,js)