Vue's props enable child components to change together with the parent component
- 高洛峰Original
- 2016-12-08 16:05:082421browse
The example in this article shares with you Vue's props to implement changes in parent components and sub-components for your reference. The specific content is as follows
Similar to using v-bind to bind HTML features to an expression, you can also use v-bind to bind Define dynamic Props to the parent component's data. Whenever the data of the parent component changes, it will also be transmitted to the child component:
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>
It is usually simpler to use the abbreviated syntax of v-bind: b9be57868f6a2c55dbe32f837e1be5d04e517a27fe89dceebc97891337d3a4a7
Instance:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="vue.js"></script>
<meta charset="UTF-8">
<title>vue的props实现父组件变化子组件一起变化</title>
</head>
<body>
<div id="app1">
<input v-model="messsage" > <!--input绑定实例中data中的message-->
<div >
<child v-bind:my-message="messsage"></child> <!--子组件绑定实例中data中的message-->
</div>
</div>
<script>
Vue.config.debug = true;
Vue.component('child',{
props: ['myMessage'], //VUE实例中myMessage 等价于my-message
template: '<span>{{ myMessage }}</span><br>'
});
var vm = new Vue({
el: '#app1',
data:{
messsage:'hello you are a good boy!'
}
});
</script>
</body>
</html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed introduction to WeChat applet Mustache syntaxNext article：Detailed introduction to WeChat applet Mustache syntax