精华内容
下载资源
问答
  • vue 父传子 props

    2019-05-27 10:39:19
    组件 <template> <div> <h1>{{title}}</h1> <Child :pMag='msg' :pExpression='msgExpA+msgExpB' :pObj='msgObj' :pObjMsg='msgObj.msg3' ...

    父组件

    <template>
      <div>
        <h1>{{title}}</h1>
        <Child
            :pMag='msg'
            :pExpression='msgExpA+msgExpB'
            :pObj='msgObj'
            :pObjMsg='msgObj.msg3'
            :pArray='msgArray'
            :pIsBoolean='isMsg'>
        </Child>
      </div>
    </template>
    <script>
        import Child from './Child'
        export default {
            name:'Father',
            components:{
                Child
            },
            data () {
                return {
                    title:'这是父组件',
                    msg:'我是父组件单向传过来的数据',
                    msgExpA:'props也可以是一个表达式:我是表达式A',
                    msgExpB:',我是表达式B',
                    msgObj:{
                        msg1:'props也可以是一个对象',
                        msg2:'另外,props也可以单传一个对象中的任一属性:',
                        msg3:'我是props对象中的属性msg3'
                    },
                    msgArray:[
                        {
                            id:1,
                            msg:'props也可以是一个数组',
                        },
                        {
                            id:2,
                            msg:'一般结合v-for来循环渲染',
                        },
                        {
                            id:3,
                            msg:'使用v-for时别忘了给key赋值哦~',
                        }
                    ],
                    isMsg:true
                }
            },
        };
    
    </script>
    

    子组件 

    <template>
      <div class='child-box'>
        <h1>{{title}}</h1>
        <h1>{{pMag}}</h1>
        <br/>
        <h1>{{pExpression}}</h1>
        <br/>
        <h1>{{pObj.msg1}}</h1>
        <h1>{{pObj.msg2}}</h1>
        <br/>
        <h1>{{pObjMsg}}</h1>
        <br/>
        <ul>
            <li v-for='item in pArray' :key='item.id'>
                <h1>{{item.msg}}</h1>
            </li>
        </ul>
        <br/>
        <h1>props也可以是布尔类型,一般结合v-if和v-else使用</h1>
        <h1 v-if='pIsBoolean'>当你看见我,说明pIsBoolean是true</h1>
        <h1 v-else>当你看见我,说明pIsBoolean是false</h1>
      </div>
    </template>
    <script>
        export default {
            name:'Child',
            props:['pMag','pExpression','pObj','pObjMsg','pArray','pIsBoolean'],
            data () {
                return {
                    title:'这是子组件'
                }
            }
        };
    </script>
    
    
    <style scoped>
    .child-box{
        margin-top:100px;
    }
    
    </style>
    

     

    展开全文
  • vue 父传子props用法示例 思路过程:在子组件定义props,你可以选择给接收到的值做校验。在父组件引入子组件,然后在子组件标签绑定你要传递的值。 子组件 // 子组件 <template> <div class="childDiv"&...

    在这里插入代码片@TOC

    vue 父传子props用法示例

    思路过程:在子组件定义props,你可以选择给接收到的值做校验。在父组件引入子组件,然后在子组件标签绑定你要传递的值。

    子组件

     // 子组件
    <template>
     	<div class="childDiv">
     		<span>{{msg}}</span>
    	</div>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {}
    		},
    		// 接收来自父组件的数据
    		// props可以使数组,也可以是对象(校验)
    		// props: [ 'msg' ]
    		props: {
    			msg: {
    				type: String, // 指定msg类型
    				require: false, // 是否必传,这里如果为true,在父组件不传msg,页面会报错
    				default: null // msg的默认值
    			}
    		}
    	}
    </script>
    

    父组件

     // 父组件
    <template>
     	<div class="fatherDiv">
     		// 传固定String
     		<ChildDiv :msg="123123" />
     		// 传动态String
     		<ChildDiv :msg="msgVal" />
    	</div>
    </template>
    
    <script>
    	// 引入子组件
    	import ChildDiv from "./components/childDiv"
    	export default {
    		data () {
    			return {
    				msgVal: null
    			}
    		},
    		// 注册childDiv组件
    		components: {
    			ChildDiv
    		},
    		methods: {
    			getMsgVal () {
    				this.msgVal = "123456"
    			}
    		}
    	}
    </script>
    

    父传子就是这么简单,纯手打。谢谢!!~

    展开全文
  • 大纲 原文代码格式更精彩http://shengxinjing.cn/vue/communicate.html入门组件化父传子兄弟祖先 provide & injectdispatchboardcastevent-busvuex入门作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段...

    45c1bf4c588eeb4a86f6162a1291504e.gif

    大纲  原文代码格式更精彩  http://shengxinjing.cn/vue/communicate.html

    1. 入门

    2. 组件化

    3. 父传子

    4. 兄弟

    5. 祖先 provide & inject

    6. dispatch

    7. boardcast

    8. event-bus

    9. vuex

    入门

    作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了

    323477b6c0112d93d1f44715ba07bed1.gif

      <template>  <div id="app">    <h1>{{title}}</h1>    <div>      <input type="text" v-model="val">      <button @click="add">添加</button>      <button @click="clear">清空</button>    </div>    <ul>      <li v-for="todo in todos" :key="todo.title" :class="{done:todo.done}">        <input type="checkbox" v-model="todo.done">        {{todo.title}}      </li>    </ul>    <p>{{active}} / {{all}}p>  </div></template><script>export default {  name: "app",  data() {    return {      title: "蜗牛老湿很骚气",      val: "",      todos: []    };  },  mounted() {    const todos = localStorage.getItem("todos");    if (todos) {      this.todos = JSON.parse(todos);    } else {      this.todos = [        { title: "吃饭", done: true },        { title: "睡觉", done: false },        { title: "写代码", done: false }      ];    }  },  computed: {    active() {      return this.todos.filter(v => !v.done).length;    },    all() {      return this.todos.length;    }  },  watch: {    todos: {      deep: true,      handler(todos) {        localStorage.setItem("todos", JSON.stringify(todos));      }    }  },  methods: {    clear() {      this.todos = this.todos.filter(v => !v.done);    },    add() {      if (this.val) {        this.todos.push({ title: this.val, done: false });        this.val = "";      }    }  }};</script><style>li.done {  color: red;  text-decoration: line-through;}</style>

    大概包含的内容如下,对这个例子熟悉后,才是我们的正文,如果上面代码有没看懂的地方,快去Vuejs官网回顾一下吧

    1. 变量渲染

    2. 循环渲染

    3. class渲染

    4. 计算属性

    5. 监听器

    6. 绑定事件

    7. 生命周期

    组件化

    Vue单文件组件。Vue的单文件组件相信大家都体验过,通过vue-cli初始化的项目自动就支持了,新建Child1.vue

      <template>    <div>Child1div>template><script>export default {    }script>

    App中使用

      <template>  <div id="app">    <Child1>Child1>  div>template><script>import Child1 from '@/components/Child1'export default {  name: "app",  components:{Child1}}script>

    下面就迎来了第一个常见问题, 如果组件多了,他们之间如何通信唠嗑呢,不要小看这个问题,骚气的面试官,比如我,就经常喜欢问,下面我们来演示一下Vue组件之间常用的通信收件

    1. 父传子组件

    父子组件传值,最简单的就是通过props传递,话不多说看代码

      // App<template>  <div id="app">    <Child1 :title="title1">Child1>  div>template><script>import Child1 from '@/components/Child1'export default {  name: "app",  data(){    return {      title1:'我是你爸爸'    }  },  components:{Child1}}script>
      // Child1<template>    <div>        <h2>Child2h2>        <div>{{title}}div>    div>template><script>export default {    props:['title']    }script>

    2. 子传父

    Vue更推荐单向数据流,所以子组件像修改传递的数据,需要通知父组件来修改,使用$emit触发父元素传递的事件

      <template>  <div id="app">    <h2>Parenth2>    <h3>{{msg}}h3>    <Child1 :title="title1" @getmsg="getmsg">Child1>  div>template><script>import Child1 from '@/components/Child1'export default {  name: "app",  data(){    return {      msg:'',      title1:'我是你爸爸'    }  },  methods:{    getmsg(msg){      console.log(msg)      this.msg = msg    }  },  components:{Child1}}script><style>div{  border:1px red solid;  padding:20px;}style>
      // child1<template>    <div>        <h2>Child2h2>        <p>{{title}}p>        <button @click="toParent">传递到父元素button>    div>template><script>export default {    props:['title'],    methods:{        toParent(){            this.$emit('getmsg','爸爸,我知道错了')        }    }    }script>

    c665e121c4226055d6b5cd03cd94614c.png

    3. 兄弟组件

    兄弟组件不能直接通信,只需要父元素搭个桥即可,大家自己体验即可

    4. 祖先后代  provide & inject

    props一层层传递,爷爷给孙子还好,如果嵌套了五六层还这么写,感觉自己就是一个沙雕,所以这里介绍一个 稍微冷门的API, provice/inject,类似React中的上下文,专门用来跨层级提供数据

    现在很多开源库都使用这个api来做跨层级的数据共享,比如element-ui的tabsselect

      <script>import Child1 from '@/components/Child1'export default {  name: "app",  provide:{    woniu:'我是蜗牛'  },  components:{Child1}}script><style>
      // 子孙元素<template>        <div>        <h3>Grandson1h3>        <p>            祖先元素提供的数据 : {{woniu}}        p>    div>template><script>export default {        inject:['woniu']}script>

    b6b4e708a93b6b92e592e0474d43d279.png

    但是provider和inject不是响应式的,如果子孙元素想通知祖先,就需要hack一下,Vue1中有dispatch和boardcast两个方法,但是vue2中被干掉了,我们自己可以模拟一下

    原理就是可以通过this.$parent和this.$children来获取父组件和子组件,我们递归一下就可以了

    5. dispatch

    递归获取$parent即可  比较简单

      <button @click="dispatch('dispatch','哈喽 我是GrandGrandChild1')">dispatchbutton>
        methods: {    dispatch(eventName, data) {      let parent = this.$parent      // 查找父元素      while (parent ) {        if (parent) {          // 父元素用$emit触发          parent.$emit(eventName,data)          // 递归查找父元素          parent = parent.$parent        }else{          break        }      }    }  }

    6aa0ec0d56f006fee7137df8a41da9c7.gif

    注意只向上传递了,并没有影响别的元素

    6. boardcast

    和dispatch类似,递归获取$children 来向所有子元素广播

      <button @click="$boardcast('boardcast','我是Child1')">广播子元素button>
      function boardcast(eventName, data){  this.$children.forEach(child => {    // 子元素触发$emit    child.$emit(eventName, data)    if(child.$children.length){      // 递归调用,通过call修改this指向 child      boardcast.call(child, eventName, data)    }  });}{  methods: {    $boardcast(eventName, data) {      boardcast.call(this,eventName,data)    }  }}

    c563402b19975423634fd909a23f98c5.gif

    7. 全局挂载dispatch和boardcast

    想用的时候,需要自己组件内部定理dispatch和boardcast太烦了,我们挂载到Vue的原型链上,岂不是很high,找到main.js

      Vue.prototype.$dispatch =  function(eventName, data) {  let parent = this.$parent  // 查找父元素  while (parent ) {    if (parent) {      // 父元素用$emit触发      parent.$emit(eventName,data)      // 递归查找父元素      parent = parent.$parent    }else{      break    }  }}Vue.prototype.$boardcast = function(eventName, data){  boardcast.call(this,eventName,data)}function boardcast(eventName, data){  this.$children.forEach(child => {    // 子元素触发$emit    child.$emit(eventName, data)    if(child.$children.length){      // 递归调用,通过call修改this指向 child      boardcast.call(child, eventName, data)    }  });}

    这样组件里直接就可以用了 无压力

    8. 没啥关系的组件:event-bus

    如果俩组件没啥关系呢,我们只能使用订阅发布模式来做,并且挂载到Vue.protytype之上,我们来试试,我们称呼这种机制为总线机制,也就是喜闻乐见的 event-bus

      class Bus{  constructor(){    // {    //   eventName1:[fn1,fn2],    //   eventName2:[fn3,fn4],    // }    this.callbacks = {}  }  $on(name,fn){    this.callbacks[name] = this.callbacks[name] || []    this.callbacks[name].push(fn)  }  $emit(name,args){    if(this.callbacks[name]){      // 存在 遍历所有callback      this.callbacks[name].forEach(cb=> cb(args))    }  }}Vue.prototype.$bus = new Bus()

    使用

      // 使用eventBus(){    this.$bus.$emit('event-bus','测试eventBus')}// 监听this.$bus.$on("event-bus",msg=>{    this.msg = '接收event-bus消息:'+ msg})

    a723422ee989d3b2c32f923bfdf0b296.gif

    其实本身Vue就是一个订阅发布的实现,我们偷个懒,把Bus这个类可以删掉,新建一个空的Vue实例就可以啦,效果是一样的

      Vue.prototype.$bus = new Vue()

    9. vuex

    总结了那么多,其实最佳实践就是vuex,这个后面再专门写文章学习吧

    看完这个文章,Vue组件化通信应该就难不住你了,也恭喜你度过青铜,正式迈入Vue秩序白银级别

    文章代码都在 https://github.com/shengxinjing/my_blog/tree/master/vue-communicate

    点击查看原文,代码格式更精彩

    展开全文
  • vue父传子props

    2020-11-24 21:55:56
    父传子 props 1. 创建子组建 (创建,挂载,使用) 2. 在子组建中创建props属性(用于接收父组件出入的数据) 3. 在使用子组建的标签内用v-band绑定属性和数据(:props属性=“父组件数据”) 4. 在子组建中...

    父传子 props

           1. 创建子组建   (创建,挂载,使用) 
           2. 在子组建中创建props属性(用于接收父组件出入的数据) 
           3. 在使用子组建的标签内用v-band绑定属性和数据(:props属性=“父组件数据”) 
           4. 在子组建中使用父组件内的数据。
    
    展开全文
  • vue父传子props

    2020-01-02 10:38:44
    组件引用组件 组件 <template> <div> <component :pass='string'> <div> </template> <script> import Axios from "axios"; import pass from './aaa' export ...
  • 第一种传递一个数组props:["cont"]第二种传递一个对象props:{uploadOption:{type:Object, 参数类型必须是一个对象required: true 这一种说明这个参数是必须的哈}}其他的用法基础的类型检查 (null 和 undefined 会...
  • vue父传子props

    2020-06-13 11:23:59
    页面data里面定义 rwmc:"" <div :eve="rwmc"></div> 在页面用props接受一下 props:["eve"] 就可以了
  • vue 组件化 父子通信 父传子 props
  • 父传子的过程中,用到的关键词是:props 在子组件中定义 //子传父设参 props: [“listPorp”], 可以在父组件中设置值
  • vue父传子 子传父

    2020-07-22 11:25:28
    1.父传子 props 子:prop{ 接受的变量:变脸的类型 } 父:标签里动态绑定 :变量="" 2.父传子 子:定义一个点击事件 通过 this.#emit(“接受事件”,“要传的值”) 父:接受事件 <child @接收事件=“事件名”> ...
  • div> <template id="cpn"> <div> <h2>{{cmessage}}h2> <h3>{{cmovides}}h3> div> template> <script> // 父传子props const cpn={ template : '#cpn', props:['cmessage','cmovides'] } //创建Vue实例,得到 ...
  • 报错:问题出现原因就是props 单向数据流问题 vue.esm.js?efeb:628 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a ...
  • 一、组件向组件传值,通过props (1)使用方式一: ...使用elementUI的table组件作为组件,组件向table数据: 思路:el-table绑定自身数据tableData,在页面初始化时或watch监控props改变时调用...
  • 上一篇博客介绍了 Vue 中子传父...在 Father.vue 中引入 Child.vue,定义要传递的信息,这里简单设置为 sendMessage=“Vue父传子” Father.vue <template> <Child sendMessage="Vue父传子"></Child>
  • 微信订阅号:Rabbit_svip 组件和组件之间的作用域是相互独立的。也就是说,数据是不能互通的。 组件和组件之间的传值关系有几种: ...父传子的过程中,用到的关键词是:props 过程如下 HTML代码 <...
  • 父传子(父——>子)props总结成三步: 1.传 2.收 3.用 有时候需要父组件向子组件传递一些数据,例如下面的这个例子。 子组件的一些内容需要父组件传递,子组件中的一些内容是否显示由父组件来控制 //父组件 <...
  • vue父传子

    2020-03-15 14:51:00
    父传子通过props来传递值,其中default是默认值,不传的时候才会显示,required是必传值,当它为true时必须传入,否则会报错,type是设置传值的类型 子组件模板 使用子组件,注意值要用v-bind绑定 这个是结果,...
  • vue父传子,子传父

    2020-08-05 17:11:58
    父传子:在父组件用v-bind绑定一个值,在子组件中用props接受父组件绑定的值 子传父:先在子组件中定义一个方法,然后在子组件方法中使用this.emit,this.emit,this.emit,this.emit有两个参数,第一个是"自定义...
  • vue-cli 组件传值:父传子props

    千次阅读 2019-07-07 01:27:47
    父传子的基本传值就完事啦 看效果: 二、指定类型传值 就是指定传来的值是数字、对象、字符串、、、 首先在父组件上有两步操作,如下图: 在基本传值的基础上绑定成动态传值 然后在子组件上也有两步操作,...
  • 在通信中,无论是组件向组件传值还是组件向组件传值,他们都有一个共同点就是有中间介质,的介质是自定义事件,的介质是props中的属性。抓准这两点对于父子通信就好理解了。 所有的 prop 都...
  • vue 父传子,子传父

    2019-08-21 10:13:11
    组件添加行内便签v-bind:message=“orderListName”,之定义参数orderListName:”13”. :接受传值内容props:[“message”],//页面传值内容,以this.message赋值。 组件: <template> <div&...
  • 第一种:多条数据时在组件中遍历 组件: 定义一个空数组接收返回的数据 在methods将数据赋值给数组 ...在mounted调用这个函数(this....第二种如果在组件遍历,组件直接渲染 组件: 还是要定义一个listD...
  • vue 父传子

    2020-06-15 16:48:39
    props之数据验证 验证的类型可以是: String,Number,Boolean,Object,Array,Function props: { props1: Number, //必须是数值类型 ... type: Number, // 数值型 true为必 required: true }, props4: {
  • Vue 父传子

    2020-09-06 21:14:43
    组件接收数据 props:['status'], 取值方式 // 方式一 适合 status 的值是固定不变的时候 this.status // 方式二 适合 status 的值是动态的时候 watch: { status: function(newVal,oldVal){ con

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,539
精华内容 615
关键字:

vue父传子props

vue 订阅